skillup

技術ブログ

デザイン

CSSのレイアウト例 その4 グリッドレイアウト

投稿日:

本日はグリッドレイアウトについて。

このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗)

サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。

グリッドレイアウトとは画面を細かいブロックに分割し、その何個分という幅で定義するレイアウトでBootstrapが一般的です。

HTML 左サイドバー+メインコンテンツ

左サイドバーのカラム

左カラムのCSS

メインコンテンツのHTML+CSS

コンテンツ部分のHTMLを2分割grid6を2つ書いている

中列の処理 4つのブロックがある場合gird3を4つに分ける

footer

footerのCSS

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …