HTML の基本

〇見出し

h1~h6 (hはheading)
h1は最上位の見出し サイトのタイトル ウェブページにつき1つ

〇段落

「p」paragraph 段落 一つの段落であることを示し、前後に改行が入る

〇箇条書き

「ol」順序ありリスト 先頭に数字が入る
1 手順
2 手順
3 手順

「ul」順序なしリスト 先頭に・が入る  ナビゲーションでよく使う
・材料
・材料
・材料

ul ol 要素はli要素は2つでセット 単独で使用はできない
ul ol 直下には li要素しか入れられない ただし li要素の中に入れ子することは可能

〇記述リスト

<dl>
<dt> タイトル </dt>
<dd> 説明   </dd>
<dt> タイトル </dt>
<dd> 説明   </dd>
</dl>

項目とその説明がワンセットになったリスト構造 dl で囲み 項目を dt その説明を dd でマークアップする

div   意味を持ってないブロック要素
span 意味をもってないインライン要素
br    改行に使う 終了タグはない
storong 太字になる 強調する コンピュータに分かりやすくする
small コピーライトのときに使う
img 画像を挿入する  ファイルパスの間違いに注意  htmlからみて同階層[./] 1つ上[../]
alt 画像が表示されなかったときなどにテキストを表示する SEO対策にもなる

id #とセット
target属性を「_blank」にすると新規ウィンドウでURLを開くことができる

パスの練習問題

Ctrl+Space 同じ階層のデータを開く  上の階層 ../

CSSの基本

〇CSSとは

HTML文書に装飾・レイアウトをほどこすための言語

  • 文字組の整形
  • 色の変更
  • レイアウトの調整
  • 要素の装飾
  • 要素の変形
  • アニメーション効果
  • 特定の条件によって適用するスタイルを変更する機能(メディアクエリ)

CSSの記述方法 

  • インライン
  • 内部参照 head内に
  • 外部参照

〇CSSで使う単位

  • px・・・ピクセル(画素)何個分 
         👉親要素が縮んでも変わらない 
  • %・・・親要素の横幅を100%として自分を何%にするか
        👉親要素を基準に可変
  • em・・・親要素のフォントサイズの何倍にするか 行間や行頭で何文字分の指定で使う
    親 ul {font-size: 16px ;}
    子 li {font-size: 2em ;}・・・・・・32px
  • rem・・・ルート要素(HTML要素)のフォントサイズから何倍にするか フォントサイズの指定で使う
    html {font-size: 10px ;}
    li {font-size: 2rem ;}・・・・・20px

投稿者 sochankun

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です