skillup

技術ブログ

デザイン

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

投稿日:

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

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

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

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

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

左サイドバーのカラム

左カラムのCSS

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

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

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

footer

footerのCSS

-デザイン
-,

執筆者:


comment

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

関連記事

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

CSSで背景画像の出力

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

基本的な …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

no image

共通CSSに必要な要素

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。 …

アーカイブ