求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

CSS基礎

positionによるレイアウト

positionとは テキストP.146〜154 positionプロパティはボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、botto…

擬似クラス

擬似クラス(Pseudo-classes) 要素の性質スタイルを適用させたい場合に使います 主に「a要素」のリンク時のカーソルの表示状態を設定します 疑似クラスには次の6種類があります。 lang 指定された言語のスタイル link 通常リンク(未アクセス)のスタイル v…

リストを縦ナビゲーションに

ナビゲーション マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 nav要素 主要なナビゲーションやサイドバーのグローバルメニューのみを扱う セ…

CSSでレイアウト - 基本

HTMLの基本構造 《Emmet入力》 ! 「tab」キーで展開 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> コンテンツ内容の入力 h1は、ページテーマの最優先見出し pは、テーマの内容 練習としては、「自分の好きな〇〇」を入力すること 「自分の好きな食べ物」「自分の好きな音楽」「自分の好…

CSS演習 - 1カラム 石垣島観光ガイド

1カラムレイアウト 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。 観光スポット 「 …

ブロックレベル要素とインラインレベル要素

ブロックレベル要素 見出し(h1〜h6要素)、段落(p要素)、表(table要素)、リスト(ul、ol、dl要素)などが該当します ブロックレベル要素は、その前後で改行表示されます ブロックレベル要素は、デフォルト状態で親要素と同じ幅を持っています 親要素よ…

文字の囲みと表の枠線

文字の囲み borderプロパティの値を指定する 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになります プロパティー意味 border-top要素の上の線 border-right要素の右の線 border-bottom要素…

CSSによるページ構築の手順

CSSによるページ構築の手順 入力内容のチェック 入力内容(文法)チェックは、必須です W3C Markup Validation Service(HTMLのチェック) W3C CSS Validation Service(CSSのチェック) 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブ…

★★★演習 - CSS基礎

演習 CSSの記述は、内部参照(embed)で記述 問題 CSS1 #1B888D #355584 <body> <h1 class="heading-h1">style要素</h1> <h2 class="heading-h2">style element</h2> <p class="paragraph">HTML文書内にまとめて設定します。</p> </body> 問題 CSS2 幅の指定は300px #006AB8 #BAD4EB <body> <h1 class="heading-h1">background-colorの設定</h1> <p class="paragraph">見出…</p></body>

文字指定とリセットCSS

文字指定 文字色と文字サイズを指定します 文字色 16進数:hexadecimal number #:number 0123456789ABCDEF(16個) RGBを2個ずつの数字を割り振る 2個の左側の数字が明度(Brightness)、右側の数字が彩度(Saturation) 例 #000000(黒) #FFFFFF(白) Hue(…

ボックスモデル

ボックスモデル HTMLタグでマークアップされた要素は1つの箱とみなされます ブロックレベル要素(幅指定をしない場合、ブラウザー幅で表示される) 記述するプロパティの順序は、空間からコンテンツ内容への順が一般的 パディング(padding) ボーダー辺に…

スタイルの継承

スタイルの継承(inheritance) CSSには親要素から子要素へとスタイルが継承される仕組みがあります この仕組のおかげで、同じ指定を繰り返さなくても効率よく指定ができます <html lang="ja"> <head> <meta charset="utf-8"> <title>スタイルの継承</title> <style> body { color: red; } </style> </head> <body> <h1>bodyの子要素である見出し要素は、</h1></body></html>…

CSSとは

CSSとは Cascading Style Sheets 構造化された文書をどのように表現するのかを指定するための言語 文字の色、文字の大きさ、余白などのレイアウトの指定 CSSのコーディング規約(Google) 「Google HTML/CSS Style Guide」を適当に和訳してみた Google HTML/…

縦ナビゲーション

ナビゲーション マウスクリックにより、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する …

1カラムレイアウト

1カラムレイアウト 背景画像の作成 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。鮮やかなコバルトブルーの海岸は、ダイバーやシュノーケリングを楽し…

ボックスモデル

ボックスモデル HTMLタグでマークアップされた要素は1つの箱とみなされます ブロックレベル要素(幅指定をしない場合、ブラウザー幅で表示される) 記述するプロパティの順序は、空間からコンテンツ内容への順が一般的 パディング(padding) ボーダー辺に…