Home > TagScript > html,cssテンプレート

ベクトルドロー・レベルゼロ

シンプルなテンプレートを作成する

新規作成日 2017-02-08
最終更新日

使いやすく、理解しやすいシンプルなサイトテンプレートを作成したいと考え、html、css向けのテンプレートを作ってみようと思いました。

テンプレートを変更する

Bootstrapを使ってサイトの模様替えをしようと思いましたが、覚えることが多い上に、使いにくい気がしたので、結局現在使用しているテンプレートを元に修正することにしました。

Bootstrapのホームページで提供されているExamplesテンプレートを確認する

Bootstrapのホームページで提供されているExamplesテンプレートを確認する

  • メニュー: スマホなどの小さい画面になった時には、ボタンを押してリストが表示されるようにする。
  • レイアウト: フルールド+固定幅の2カラムデザイン
  • スクロール・スパイ:項目をサイドバーに表示し、呼んでいる位置の項目の色が変化するスクロールスパイ(Scrollspy)に対応する
  • 色:暗色系デザイン。明色系デザインは、目が疲れます。

前回は、Javascriptを避けて作成しましたが、今回は、便利な機能であれば、積極的に使用する方向で構築したいと思います。

テンプレートのhtmlフレームを作成する

動作を確認するためのhtmlのフレームを作成します。

メニューを作成する

まず、最小サイズで使用するドロップダウンメニューを作成します。ボタンを押すとメニューリストが表示されます。この機能は、cssで実現できるので、cssで実装します。

このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」