skillup

技術ブログ

デザイン

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

投稿日:

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

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

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

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

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

左サイドバーのカラム

左カラムのCSS

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

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

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

footer

footerのCSS

-デザイン
-,

執筆者:


comment

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

関連記事

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …