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

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

HTML基礎

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は、テーマの内容 練習としては、「自分の好きな〇〇」を入力すること 「自分の好きな食べ物」「自分の好きな音楽」「自分の好…

要素の入れ子(ネスト)と子孫関係

要素の入れ子(ネスト)と子孫関係 テキストP.035 HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造に…

リスト、表、画像挿入、リンク

リスト 箇条書き <ul> <ol> <dl> 1行で簡潔に伝える文章 Webの仕組みでは、リンクとして詳細の内容に遷移するために利用することが多い ul(unordered list) 順序が置き換わっても意味が伝わる並列な内容に使う。 行頭マークは「黒丸」が初期値 <ul> <li>私が好きな真っ赤なり</li></ul></dl></ol></ul>…

HTMLを書く- 文書構造(ページの内容)

bodyの中に何を書くか ページのテーマ内容の「文書構造」を記述します パラグラフ・ライティング shouronbun.com 見出し heading(1〜6) 一般的には、「h1」〜「h4」までを使用します 段落(本文) paragraph パラグラフの最も重要なポイントは、先頭文を読…

HTMLを書く- 基本構造(ページの枠組み)

HTML Hyper Text Markup Language の略 HTMLドキュメント 新規ドキュメント作成 拡張子を「.html」として保存する 基本構造を入力する 基本構造 入力は、必ず「開始タグ」→「終了タグ」という順序で入力する DOCTYPE宣言 「!(エクスクラメーション)」を記…