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

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

CSS基礎

positionによるレイアウト

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

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

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

floatを使ったレイアウト基礎

floatとは テキストP.104 浮く(浮動状態) floatは要素を横に並べたり、文字を回り込ませたいときに指定するプロパティ プロパティの指定 プロパティの指定 挙動 float: left; 指定した要素を左に浮き上がらせて寄せて、次の要素を左方向にあとに続いている…

縦ナビゲーション

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

1カラムレイアウト

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

CSSでレイアウト - 基本

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

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>

ボックスモデル

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