Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」 | 9ineBB
第1回 「CSSフレームワークって何？」 第2回 「グリッドシステムって何？ グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全体的な構図の作成とナビゲーションバーの設置」 第6回 「ヘッダー部分を作る」 第7回 「コンテンツ部分とサイドバーを作る」 第8回 「オーソドックスなシンプルなフッターを作る」 前回は、ナビゲーションバーをBootstrapで作成しました。 今回 第6回では、WEBサイトのヘッダー部分を作成します(目に見える方) 今回作成するのは Headerの部分で、HTMLの<head>タグのことではないですよ。HTML5の<header>を使って今回は表します Headerをどんな感じに作るか 左端から右端まであるヘッダーにしたいと思います イメージはこんな感じ http://dif
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
