一番大切な見出しを作る
<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
X
LINE
はてな
アプリ
QRコード
URLコピー
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デザイン