日: 2023年3月1日

2023年3月1日 コメントする

3月1日（水）－CSS基礎④レイアウト作成プロパティ/ボックスモデル/横並び（float/flex/CSS Grid）/自由配置（position）

【要参考】
①レイアウト・float-フロートレイアウト・position-ポジション
　CSS でレイアウトを作りましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※特に【L4.5.3 注意事項】要読
②flex-フレックスレイアウト
　フレックスレイアウトを活用しましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
③CSS Grid-CSSグリッド
　グリッドレイアウトを活用しましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
④background-バックグランド
　CSS で飾りを追加しましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋

displayについて

displayタグを使う事で、様々なレイアウトを可能にします。まずはブロックレベル要素とインライン要素の違いと特徴をしっかりと確認しておきましょう。

サンプルファイル（ displayの種類について ）

【参考サイト】

width と height について

単純にボックスに幅と高さを持たせるタグになります。ただし、幅と高さが持てるのは、ブロックレベル要素になります。また、Webサイトの性質上細かなルールがいくつも存在します。まずはしっかりとボックスモデルの基礎となるという事を意識しておきましょう。

サンプルページ（CSSの記述【配置】）

【ワンポイントアドバイス】
幅（width）については、ある程度指定した数値が反映されますが、高さ（height）の指定については、複雑なルールがあります。高さ（height）は、基本ニュートラルに設定し、やむを得ない場合のみ絶対値を指定すると覚えておくと、よいかもしれません。

【参考サイト】

border と padding と margin について

要素の中身（内容）があり、そのまわりの余白がpaddingです。 そのまわりにはborder（線）があり、それより外側の余白がmarginです。 … この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。 なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

サンプルページ（CSSの記述【ボックス】）

【ワンポイントアドバイス】
CSSで最も理解度が求められるタグが「border」「padding」「margin」です。CSSの理解の最重要ポイントになりますので、しっかりと理解と確認をしておきましょう。また、役割を分けるのも制作のコツです。
borderは、罫線の装飾
paddingは、内側の余白
marginは、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。

【参考サイト】

ボックスモデルについて

英語から翻訳-Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア（英語)

ボックスモデルとは HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っています。 … ボックスモデルは、コンテンツを中心に4つの要素（コンテンツ, border, magrin, padding)で構成されています。

【参考サイト】

背景について

backgroundプロパティは、背景に関する指定をまとめて行う際に使用します。 指定の順序は問われません。また、必要のない指定は省略可能です。

サンプルページ（画像）

【参考サイト】

「img」と「background」の違いについて

コーディングをする時「img」と「background」で画像をどちらとして使用するのかがとても重要になります。「img」はHTMLなので文法の意味を持ち、「 background 」はCSSなので、見た目の話しだけになります。
サイトデザインの重要ポイントになりますので注意しておきましょう。

横並び（float）について

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

clear について

clearプロパティは、floatの回り込みを解除するプロパティです。 clearプロパティは、float指定した要素の次の要素に指定します。 float要素が連続している場合、一番最後のfloat要素の次の要素に指定します。

【ワンポイントアドバイス】
floatは約十数年ぐらいの間、CSSのレイアウトで横並びをさせる手法として多くのサイトで利用されていました。現在ではそれに代わる手法がいくつか用意されていますが、長い間多くのデザイナーさん達が使ってきているので、現サイトの更新業務としては、まだまだ遭遇する可能性が高いので、しっかりとその仕組みを理解しておきましょう。

【参考サイト】

float を clear する方法について

floatを解除する方法はいくつかありますが、抑えておきたい方法として３つはしっかり覚えておきましょう。

① float を clear する方法について「 clear 」を使う
floatを指定した要素の後に来る要素にclearを指定する
関係性は必ず同階層である事（親子関係では適用されない）

② float を clear する方法について「 clearfix 」を使う
float している要素の親要素に、疑似要素の:afterを利用し下記のように記述します。
※①のようにclear出来ない場合にこちらを使うと良いでしょう。

セレクタ::after {
　　display: block;
　　clear: both;
　　content: “”;
}

③ float を clear する方法について「 overflow: hidden;  」を使う
float している要素の親要素に、overflow: hidden;を使うと適用できます。
※ただし厳密には文法として変であるという説もありますので、仕様変更やバグに気を付けて利用しましょう。

【参考サイト】

サンプルページ（レイアウト見本）

サンプルページ（横並びについて）

positionについて

positionについては、使い方を誤るとややこしくなりますので、基本的な3つの使い方と使い分けをしっかりと覚えておきましょう。
1．position: relative; （相対位置）
2．position: absolute; （絶対位置）
3．position: fixed; （固定位置）

サンプルページ（CSSの記述【配置】）

サンプルファイル（positionの基本の使い方）

サンプルファイル（positionの使い方）

【ワンポイントアドバイス】
position タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。

【参考サイト】

メモ

・CSSグリッドは最近できたけど流行らなかったので、ディスプレイで並べるか、フロートかフレックスがいいかも（フレックスは最近できた方法で、無理やり親のBOXサイズに収める（合わせる）。ディスプレイは単純に並べるイメージ。）
　違いはあまりなく、最近はフレックスが主流のようなので、フレックスを使うと良さそうかもとのこと
・positionは安易に乱用せず、最後の手段にする
・フロートのclearは3種類方法があるがoverflow　→　:after　の優先順位で書くのがおすすめとのこと
・width（横幅）は使うけど、height（縦）は基本触らずニュートラルに設定し、やむを得ない場合のみ絶対値を指定する方がよい
・親BOXの関係で子のマージン分がはみ出て表示が崩れる時は、calc 関数（値の計算）をつかうとよい（widthはマージン分は含まれないので）