HTML&CSS

＊この記事は一部修正と訂正を行っています。（2015/08/30） gifアニメやFLASH全盛のころのような派手なアニメーションは敬遠されがちですが、ユーザビリティから見て使いやすく誘導するためのアニメーションは歓迎されます。そんなワン...

リストの書式 よく使うリストの表示形式をクラスの指定で実現できます。 list-unstyledクラス ulに指定するとマーカーを表示しない。また、ulの左余白を０にする・・・サンプル list-inlineクラス ulやol...

テキストと見出しの書式 テキストや見出しの書式は決められたクラス名で設定します。この辺のクラス名はBootstrapのページなどでクラス名と書式を確認しておくとよいでしょう。 bodyの設定 Bootstrapの基本設定は、フォン...

グローバルナビゲーションとして使用できるナビゲーションバーの作成方法です。 ナビゲーションバーを作成するには少し複雑なタグとクラスを使用することになります。 Bootstrap本家のサンプルを確認してみましょう。 基本的なナビゲー...

Bootstrapを使うと手軽に見栄えのよいデザインでしかも使い勝手のよいボタンやナビゲーションを作成することができます。 buttonタグでボタンの作成 Bootstrapを使ってボタンを作成するには、buttonタグにクラス名 bt...

レスポンシブWebデザインは一つのファイルで複数のデバイスに対応させることができる仕組みです。スマホサイトの重要性はますます高くなっていますので、サイト作成イコールレスポンシブ対応は当たり前になってきています。 スマホ用とPC用を考慮して...

Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。 Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。 Bootstrapは通常のボックスモデルではありません。border-bo...

グリッドデザインとは グリッドデザインとは、均等なマス目に分割して、そのマス目に沿って各部品を配置していくデザインです。 有名なものに「960 Grid System」があります。 Webサイトを作成するときにグリッドデザインを活...

BootstrapはCSSフレームワークのひとつです。自分で一からCSSを構築しなくても簡単に使い勝手の良いデザインのWebサイトを作成することができます。面倒なレスポンシブサイトも簡単にできあがります。 HTMLとCSSの基本をマスター...