HTML・CSS用語まとめ

2022年12月07日 カード65 いいね5
AIによる要約・使い方の説明

AIによる分析のため、間違った解釈や説明をしている場合があります。

要約

本書は、Web制作の基礎となるHTMLとCSSの基本タグおよびプロパティを網羅的にまとめた学習用単語帳です。HTMLセクションでは、見出し(h1~h3)、段落(p)、画像(img)、リンク(a)、各種レイアウト用コンテナ(div, section, navなど)といった、Webページの構造を組み立てるために必須の要素が簡潔に解説されています。また、表作成(table)やリスト(ul, li)などの頻出タグも含まれています。

後半のCSSセクションでは、フォントや文字色の装飾、枠線(border)、背景設定、余白(padding/margin)の制御、およびWebレイアウトの基本となる回り込み(float)や要素の並び順(display)に関するプロパティを収録しています。タグの基本的な役割から、実務でよく利用するプロパティの書き方まで、Web制作の入門者が最初に押さえておくべき構文が幅広く整理されています。

使い方

本書は、Webサイト制作をこれから始める初心者や、HTML/CSSの構文を効率的に暗記したい方に最適です。まずは各カードの表側にある「何をしたいか(例:画像を表示したい、余白を作りたい)」という目的から、裏側のタグやCSSコードを即座に引き出せるようになるまで繰り返し学習してください。

特に、プロパティ名と値の組み合わせは、実際にテキストエディタでコードを打ち込みながら学習するのが最も効果的です。記載されているコードを参考に、ご自身のPC環境で小さなHTMLファイルを作成し、ブラウザでどのように表示が変化するかを確認しながら進めてください。また、単語帳にある「クラス名の指定」や「CSSセレクタ」の概念を理解することで、より効率的なコーディングができるようになります。HTMLの構造とCSSによる装飾のルールを切り分けて記憶することで、Web制作の基礎体力を着実に向上させることができます。

#HTML #CSS #Web制作 #プログラミング初心者 #コーディング #Webデザイン

広告

暗記

ビューア設定

[Enter]でカードをめくります。キーボードショートカット暗記ビューア設定

HTML・CSS用語まとめ
広告
  • 一番大切な見出しを作る
    <h1>
  • 二番目に大切な見出しを作る
    <h2>
  • 三番目に大切な見出しを作る
    <h3>
  • 段落を作る
    <p>
  • 改行する

  • 写真やイラストなどの画像を表示する
    <img>
  • 読み込む画像を指定する
    <img src = "画像">
  • 画像の横幅を指定する
    <img width ="横幅">
  • webサイトの看板を作る
    <header>
  • ナビゲーションの箱を作る
    <nav>
  • webサイトの内容ごとに区切る箱を作る
    <section>
  • サイトの終点に入れる箱を作る
    <footer>
  • 複数のHTMLタグをまとめたり、レイアウト用の箱を作る
    <div>
  • HTMLタグに目印をつける
    <div class ="クラス名">
  • 表を作る
    <table>
  • 表の「行」を作る
    <tr>
  • 表の「セル」を作る
    <td>
  • 表の「見出しとなるセル」を作る
    <th>
  • リストを作る
    <ul>
  • リストの項目を作る
    <li>
  • リンクを作る
    <a>
  • リンク先を決める属性
    <a href ="リンク先">
  • HTMLタグに名前を付ける
    <saction id ="ID名">
  • HTMLタグの先頭につく記号
    開始タグ
  • HTMLタグの終点につく記号
    終了タグ
  • HTMLで画像を表示する際に着けるタグ
    imgタグ
  • HTMLで画像を表示する際に着ける属性
    src属性
  • 文字の色を変える
    color
  • 文字の大きさを変える
    font-size
  • フォント・文字の種類を変える
    font-family
  • 文字をそろえる
    text-align
  • 線の種類を変える
    border-style
  • 線の種類(直線)
    solid
  • 線の種類(点線)
    dotted
  • 線の色を変える
    border-color
  • 線の太さを変える
    border-width
  • 角を丸める
    border-radius
  • 線の見た目(種類・色・太さ)をまとめて設定する
    border
  • 背景の色を変える
    background-color
  • 背景に写真を入れる
    background-image
  • 背景の繰り返しを決める
    background-repeat
  • 背景のサイズを決める
    background-size
  • 画像の位置を決める
    background-position
  • 横の長さを変える
    width
  • 高さを変える
    height
  • まとめて余白をつける(内側)
    padding
  • 上に余白をつける(内側)
    padding-top
  • 右に余白をつける(内側)
    padding-right
  • 左に余白をつける(内側)
    padding-left
  • 下に余白をつける(内側)
    padding-bottom
  • まとめて余白をつける(外側)
    margin
  • HTMLの目印を使って、CSSを指定する
    .クラス名
  • 回り込ませて横並びにする
    float
  • 回転させる(45度)
    tramsform:rorate(45deg)
  • 表のセルの隙間をなくす
    border-collapse:collapse
  • リストの点を取る
    list-style-type:none;
  • リンクの下の線を消す
    text-decoration:none;
  • リンクに触った時の見た目を指定する
    a:hover
  • リストなどを横に並べる
    display:inline-block;
  • CSSで見た目を変える部分を選ぶ部分のこと
    セレクタ
  • CSSでの見た目の替え方
    プロパティ
  • CSSでの画像表示
    div{background-image:url(画像の名前);}
  • カラーコード赤
    #ff0000
  • カラーコードオレンジ
    #ffa500
  • カラーコード茶色
    #a52a2a
  • リストに戻る テストする
よく頑張りました
暗記スタート