左右にサイドバーがないページ。スマホでもタブレット、PCでも閲覧しやすい
カラムは画面を縦分割したときの単位。「列」。
縦のカラム(列)に対して、画面を横分割したときの単位はロー(行)といいます。外部リンク参考サイトさん マルチカラム
情報量の多いサイトの場合、適しているのが2カラムで、一番利用されているレイアウト
「メイン」と「サイドバー」というレイアウトが多い flexboxかfloatで位置指定
親要素、子要素で作成。外部リンク参考サイトさん 2カラムつくりかた
float: left;を続ける
余白を多くとり、すっきりと見やすくする。リンク設定を分かりやすくする.
Flexboxを使う
div,id,class等の幅と高さ指定にはwidth, heightプロパティでpx ,%を使い指定します。
値をautoにすると自動的に調整されます。
幅と高さ指定にはwidth, heightプロパティを使います。% または、pxで指定する
画像やdivなどに使います。セレクタ{width:数値または、%;height:数値または、%;}
幅の最小値、最大値を指定する
スマホ表示などで、これ以上小さな表示にならないようにする。高さの最小値、最大値を指定する
要素の幅、高さに”余白部分(padding)とborderを含めるのか”を指定します。
div等の親要素からはみ出るときや線がはみ出る時に使用します
はみ出た部分の表示方法を指定する
セレクタ {overflow:値;}
CSS3から使用できるレイアウトを簡単に設定できる機能のこと。フレキシブルボックスとも呼びます。
横並び、上下左右位置ぞろえが簡単。複数行にわたる配置も設定できます。
外部リンク参考サイトさん flexboxのやりかた flexboxのやりかた2親要素の中に子要素を作成し制作します。
Flex コンテナ 親要素になります。 {display: flex;}をcssで設定します。
Flexアイテム 子要素となります。
cssで親要素の「displayプロパティ」の値に「flex」を指定すると、子要素が自動的に並列になります。
親要素{display:flex;}
子要素の幅やmargin、padding等は子要素のプロパティで設定する。
Flexアイテム(子要素)を折り返したり、複数行に並べます。親要素に指定します。
wrap 子要素を折り返し、複数行にします.親要素 {flex-wrap: wrap;}
nowrap 子要素を折り返しせず、一行に並べる(初期値)左右水平方向のの位置指定。親要素のプロパティで設定します。
justify-content:flex-start; 左揃え(初期値)justify-content:space-between; 均等にスペースを開けて配置します。2つだとページ両端に配置になります。
justify-content:space-around; 均等にスペースを開けて配置します。両端にもスペースができます。
justify-content:center; 中央揃え
外部リンク参考サイトさん justify-contentの値について上下の位置指定
.子要素{ flex-basis:幅の数値; }
位置の数値単位はpx、%が多い
セレクタ{ position: fixed; 位置 }
親要素(元になる、重ねる場所)はposition: relative;、重ねるものはposition: absolute;
absoluteを使用するときにrelativeを指定しなければ、親要素はbodyになります。
表示する位置は、position: absolute;にて、
top:数値px;(上からの距離)、bottom:数値px;(下からの距離)、left:数値px;(左からの距離)、right:数値px;(右からの距離)
にて設定
position: relative;、position: absolute;は、組み合わせなくてもそれぞれ個別に使用することができます。
表示する位置は、top:数値px;(上部からの距離)、bottom:数値px;(下部からの距離)、left:数値px;(左からの距離)
right:数値px;(右からの距離)を使います
{ position:relative; top:数値px; left:数値px; }
position: absolute; 親要素(親要素はbodyになります)の左上が基準となり、そこから動かすことになります。{ position:absolute; top:数値px; left:数値px; }
外部リンク参考サイトさん position: relativeとabsoluteの使い方z-index 要素の重なりの順序を指定するプロパティ。
z-indexプロパティを指定した要素は、数字が小さいほど奥へ、大きいほど手前に表示されます。 z-index:数値;
この指定は、positionプロパティで relative、absolute、fixed を指定している場合に有効。displayは、要素をブロック要素かインライン要素にするプロパティ。 値は、blockやinline、inline-blockが一般的
外部リンク参考サイトさん display使い方{margin: 0 auto;}にすると水平方向に中央寄せになります
width(幅)、height(高さ)を付けることができる。marginとpaddingも付けることができます
widthとheightを付けれません。marginとpaddingは上下付けれません、左右だけ付けれます。
親要素をul,子要素をliとして使うことが多い IE7以下は使えません。
画像などの要素を左(left)または右(right)に配置するCSSプロパティ。次の要素が配置されます。
主にdivなどboxの要素にfloatプロパティで左右配置を指定する。cssに記述しdivなどhtmlの要素にclassでつける。
float:left; | 左に寄せる。 |
float:right; | 右に寄せる。 |
clear:both; | 回りこみを解除する。解除する時はclearを使う |
周囲の余白 marginプロパティを使う。margin-rightで右側に余白ができる {margin-right: 数値px;}
幅指定 widthで、それぞれのかたまりの幅を指定する {width:数値%;}
cssだけでなくHTMLだけでも使うことができる。 要素にstyle属性をつけるセレクタ{margin: 0 auto;} ブロック要素を水平方向に中央寄せします。上下にはできません。セレクタの幅、widthの指定が必須
display: inline-block;text-alignプロパティは、文字や画像の横の揃え方を指定するプロパティです。「テキスト・アライン」と読みます。
h1,2などの見出しにも使えます。ブロック要素の配置を指定したい場合は「margin:0 auto;」「float」「position」などを使いましょう。
{text-align:left;} | 左揃え |
{text-align:right;} | 右揃え |
{text-align: center;} | 中央ぞろえ |
{text-align: justify;} | 均等割付 |
縦位置の揃え方を指定。 vertical-alignプロパティ使い方
インライン要素とtableのセル要素の縦位置の揃え方を指定出来ます。
ブロック要素にはできません。見出し要素(h1, h2, h3など)やp、ul、li、divなどには使用できません。
vertical-align: top; | 上端揃え |
vertical-align: middle; | 中央揃え |
vertical-align: bottom; | 下端揃え |
サイト全体のページ構成、内容を一覧表示したもので、ユーザーにも
検索エンジンにもサイトの内容をわかりやすく伝える役割をします。
HTMLサイトマップとXMLサイトマップの2種類があります。
外部リンク参考サイトさん bootstrap無料テンプレート