CSSレイアウトpc操作中

目次

幅と高さ
(width、height
など)のとこへ
flexbox
のとこへ
css position
プロパティ
のとこへ
css display
のとこへ
css float
のとこへ
text-align(横の位置),
vertical-align(縦の位置)
のとこへ

レイアウトのきそ

シングルカラム

左右にサイドバーがないページ。スマホでもタブレット、PCでも閲覧しやすい

マルチカラム

カラムは画面を縦分割したときの単位。「列」。

縦のカラム(列)に対して、画面を横分割したときの単位はロー(行)といいます。

外部リンク参考サイトさん マルチカラム

2カラム

情報量の多いサイトの場合、適しているのが2カラムで、一番利用されているレイアウト

「メイン」と「サイドバー」というレイアウトが多い flexboxかfloatで位置指定

親要素、子要素で作成。

外部リンク参考サイトさん 2カラムつくりかた

3カラム

float: left;を続ける

カード型

ECサイトやコンテンツの多いWebサイトでよく使われる。レスポンシブに強い。
つくりかたのこつ

余白を多くとり、すっきりと見やすくする。リンク設定を分かりやすくする.

Flexboxを使う

幅と高さ

div,id,class等の幅と高さ指定にはwidth, heightプロパティでpx ,%を使い指定します。
値をautoにすると自動的に調整されます。

widthとheight

それぞれ「ウィズ」と「ヘイト」と言います。

幅と高さ指定にはwidth, heightプロパティを使います。% または、pxで指定する

画像やdivなどに使います。

セレクタ{width:数値または、%;height:数値または、%;}

min-width、max-widthプロパティ

幅の最小値、最大値を指定する

スマホ表示などで、これ以上小さな表示にならないようにする。
セレクタ{min-width: 数値px;}
セレクタ{max-width: 数値px;}

min-heightとmax-height

高さの最小値、最大値を指定する

セレクタ{min-height: 数値px;} 高さが数値より小さくならないようにする
セレクタ[max-height: 数値px;} 高さが数値以上大きくならないようにする

box-sizing

要素の幅、高さに”余白部分(padding)とborderを含めるのか”を指定します。
div等の親要素からはみ出るときや線がはみ出る時に使用します

box-sizing:content-box; 初期値 幅・高さに余白やボーダーを含めない
box-sizing:border-box; 横幅・高さに余白(padding)やボーダーを含める

overflow

はみ出た部分の表示方法を指定する

セレクタ {overflow:値;}

外部リンク参考サイトさん overflowについて

flexboxフレックスボックス

CSS3から使用できるレイアウトを簡単に設定できる機能のこと。フレキシブルボックスとも呼びます。

横並び、上下左右位置ぞろえが簡単。複数行にわたる配置も設定できます。

外部リンク参考サイトさん flexboxのやりかた   flexboxのやりかた2   

仕組み

親要素の中に子要素を作成し制作します。

Flex コンテナ 親要素になります。 {display: flex;}をcssで設定します。

Flexアイテム 子要素となります。

書き方

htmlファイルではdivなどにclass属性で親要素と子要素をそれぞれ記述します。

cssで親要素の「displayプロパティ」の値に「flex」を指定すると、子要素が自動的に並列になります。
親要素{display:flex;}

子要素の幅やmargin、padding等は子要素のプロパティで設定する。

flex-wrapプロパティ

Flexアイテム(子要素)を折り返したり、複数行に並べます。親要素に指定します。

wrap  子要素を折り返し、複数行にします

.親要素 {flex-wrap: wrap;} 

nowrap 子要素を折り返しせず、一行に並べる(初期値)
justify-content

左右水平方向のの位置指定。親要素のプロパティで設定します。

justify-content:flex-start;  左揃え(初期値)

justify-content:space-between; 均等にスペースを開けて配置します。2つだとページ両端に配置になります

justify-content:space-around;  均等にスペースを開けて配置します。両端にもスペースができます。

justify-content:center; 中央揃え

外部リンク参考サイトさん justify-contentの値について
align-items

上下の位置指定

flex-basisプロパティ子要素の幅を指定し、その幅で揃えられます。値は「数値と単位」か「%」になります。

.子要素{ flex-basis:幅の数値; }

CSSグリッド

positionプロパティ

positionプロパティの値にはstatic;、relative;、absolute;、fixed;の中からひとつ入力。  static初期値、特に配置方法を指定しない。

位置の数値単位はpx、%が多い

fixed 画面をスクロールしてもその要素の場所は固定されます。 位置の基準は親要素ではなく「ウィンドウ全体」です。
top: 0と指定したら画面の最上部に表示されます。

セレクタ{ position: fixed; 位置 }

relativeとabsoluteの組み合わせ

親要素(元になる、重ねる場所)はposition: relative;、重ねるものはposition: absolute;
absoluteを使用するときにrelativeを指定しなければ、親要素はbodyになります。

表示する位置は、position: absolute;にて、
top:数値px;(上からの距離)、bottom:数値px;(下からの距離)、left:数値px;(左からの距離)、right:数値px;(右からの距離)
にて設定

外部リンク参考サイトさん position: absolute;と relative;の組み合わせ方(重ねて表示)
relative,absoluteのそれぞれの個別使用

position: relative;、position: absolute;は、組み合わせなくてもそれぞれ個別に使用することができます。

表示する位置は、top:数値px;(上部からの距離)、bottom:数値px;(下部からの距離)、left:数値px;(左からの距離)
right:数値px;(右からの距離)を使います

position: relative;  現在の位置から動かしたいときに使います。

{ 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プロパティ

displayは、要素をブロック要素かインライン要素にするプロパティ。 値は、blockやinline、inline-blockが一般的 

外部リンク参考サイトさん display使い方  
{display:block;} 縦に並んでいく。widthとheight、marginとpaddingを付けることができます。

{margin: 0 auto;}にすると水平方向に中央寄せになります

{display:inline-block;} 横に並んでいく。

width(幅)、height(高さ)を付けることができる。marginとpaddingも付けることができます

{display: inline;} リストを横並びにする. インライン要素span

widthとheightを付けれません。marginとpaddingは上下付けれません、左右だけ付けれます。

{display:none;} 要素の表示を非表示にします。 要素の子要素全てが非表示になります。
{display:table;} {display:table-cell;} 親要素にdisplay:table;を指定し、子要素(横並びにしたい要素)をdisplay:table-cell;にして、幅や色、高さなどを指定する 

親要素をul,子要素をliとして使うことが多い IE7以下は使えません。 

float

画像などの要素を左(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属性をつける
外部リンク参考サイトさん ・floatやりかた  ・HTMLでの使い方
解除

cssプロパティの「clear」で解除する floatを指定したら解除を忘れない

回り込みを解除したい場所でdivなどの要素につける

外部リンク参考サイトさん 回り込み解除

配置

中央配置

text-align: center;

セレクタ{margin: 0 auto;}  ブロック要素を水平方向に中央寄せします。上下にはできません。セレクタの幅、widthの指定が必須

display: inline-block;

横位置(text-alignプロパティ)

text-alignプロパティは、文字や画像の横の揃え方を指定するプロパティです。「テキスト・アライン」と読みます。

h1,2などの見出しにも使えます。
基本的にはテキストに対する指定になり,divなどのブロック要素やテーブルなどの全体の配置を移動する事はできません。

ブロック要素の配置を指定したい場合は「margin:0 auto;」「float」「position」などを使いましょう。

{text-align:left;}  左揃え
{text-align:right;}  右揃え
{text-align: center;}  中央ぞろえ
{text-align: justify;}  均等割付

縦位置(vertical-alignプロパティ〉

縦位置の揃え方を指定。 vertical-alignプロパティ使い方

インライン要素とtableのセル要素の縦位置の揃え方を指定出来ます。
ブロック要素にはできません。見出し要素(h1, h2, h3など)やp、ul、li、divなどには使用できません。

vertical-align: top;  上端揃え 
vertical-align: middle;  中央揃え 
vertical-align: bottom;  下端揃え 

サイトマップ

サイト全体のページ構成、内容を一覧表示したもので、ユーザーにも 検索エンジンにもサイトの内容をわかりやすく伝える役割をします。
HTMLサイトマップとXMLサイトマップの2種類があります。

XMLサイトマップ 検索エンジンにサイト内ページをもれなく通知するために設置する

フレームワーク

bootstrap

Twitter社が開発したスマートフォンなどにも対応し、レスポンシブデザインを採用したHTML, CSS, JavaScriptのフレームワーク
有料、無料いろいろなテンプレートがある

外部リンク参考サイトさん bootstrap無料テンプレート

楽しくpc