【HTML/CSS】初心者向け!コーディングでよく使うタグ、プロパティまとめ
今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。
よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸いです。
模写コーディングなどする際にコーディングが捗るよう、いつでも見返せるようブックマークなどして是非活用してください。
HTMLタグ
<タグ名 属性名="属性値">タグ内の要素</タグ名>
基本的なhtmlの書き方です。
「<>」小なり大なりの三角かっこの中にタグの名前を記述します。
「<タグ名>」を開始タグとして、「</タグ名>」を終了タグ、閉じタグとします。
開始タグと終了タグの間に文字など表示させたい要素を入れていきます。
また、タグの名前以外に半角スペースを空けて属性と属性値というものが入ります。
属性は主にclassやidなどで使われますが、必要無ければ記入しない場合もあります。
<h○>見出しタグ</h○>
その名の通り見出しを表します。h1~h6の段階で大見出し~小見出しへとレベルが変わります。
通常ブラウザの初期設定で文字が太く表示されます。
ただし、HTMLは検索サイト等にページの内容を正しく伝えるためにも、デザイン目的ではなく見出しとして役割を担う部分に使うようにしましょう。
見出しタグは通常はその外側の幅100%に広がる要素です。
<p>段落タグ</p>
文章の段落を表します。ひとかたまりの文章となる部分を囲むように使います。
見出し同様、通常は幅100%に広がるブロック要素です。
<br>改行タグ
文章中に改行します。pタグ内の文章の途中などに見やすいように改行を入れる際に用います。
単体で用いて閉じるタグが無いので<br/>という書き方もよく使われることがあります。
通常、改行タグが無くても端まできたら折り返すので、端末の幅の違いでスマホなどで変な改行位置になってしまわないよう注意が必要です。
<img src="○○" alt="△△"> 画像タグ
画像を表示するタグです。
srcはソースを表し、○○の部分に画像のある場所を指定します。
altは画像の説明を表し、検索サイト等に画像の意味を伝える役割もあります。
文字などと同じインラインの要素となり、文章中の一文字と同じように横に並んで表示されます。
大きい画像をそのまま使うと外側のブロックの幅も気にせずはみ出します。
タグの中で「width="幅の値"」や「 height="高さの値"」を指定することも出来ます。
brタグと同じく単体で閉じるタグが無いので<img src="〇〇" alt="△△" />と後ろに「/」を入れることもあります。
<a href="○○"> ハイパーリンクタグ</a>
ページ移動を実現するリンク用のタグです。
hrefは移動するページへのURL・ファイルパスを表します。
属性としてtarget="_blank"を追記することで別タブへリンクを開くことができます。
文字などと同じインラインの要素となり、文章中の一文字と同じように横に並んで表示されます。
クラスの書き方や外部CSSファイルの読み込み方法
クラスの場合は<タグ名 class="クラス名">要素</タグ名>属性値に「○○ △△」と間にスペースを入れることで複数のクラスを適用することができます。
CSSクラスは<head></head>内に<style>○○</style>としてファイルに直接記述したり、<link rel="stylesheet" href="△△.css">として外部ファイルに記述し読み込むことも出来ます。
CSSの書き方としてクラスは.○○{}として、{}の中にスタイルを指定していきます。
CSSプロパティ
幅の指定{width: ○○;}
要素に幅を指定します。単位はpxや%、em、remなどが使えます。
高さの指定{height: ○○;}
要素に高さを指定します。単位はpxや%、em、remなどが使えます。
背景色の指定{background-color: ○○;}
背景の色を指定します。
指定には主に16進数やRGBなどの形式が用いられます。
- 16進数では#から2桁ずつ赤、緑、青を0からfの文字で表しており、#000000が黒、#ffffffが白というような記述になります。
- RGB形式ではrgb()と書き、カッコ内に0から255までの値をカンマで区切り赤、緑、青の順に記述します。rgb(0,0,0)が黒、rgb(255,255,255)が白です。
赤、緑、青にアルファという透明度を0(透明)から1(非透明)で表す値を足して、RGBa形式としてrgba(0,0,0,0.5)というように記述することもあります。
背景画像の指定{background-image: url("○○");}
背景に画像をURLで指定します。
指定するURLは絶対パスか、そのファイルから見た相対パスです。
背景画像の繰り返しの指定{background-repeat: ○○;}
背景画像の繰り返しを制御します。
- repeat…繰り返す。初期値です。
- repeat-x…横方向のみ繰り返します。
- repeat-y…縦方向のみ繰り返します。
- none…繰り返しません。
文字色の指定{color: ○○;}
文字の色を指定します。
色の指定は背景色と同じく16進数やRGBで行います。
文字の大きさの指定{font-size: ○○;}
文字の大きさを指定します。単位にはpxや、em/remよく用いられます。
文字の太さの指定{font-weight: ○○;}
文字のウェイト・太さを指定します。標準を400として、細い方から100〜900の値で100刻みの9段階で指定したり、以下のように指定します。
- lighter…一段階細く
- normal…標準の太さに
- bold…太く
- bolder…一段階太く
多くのフォントはそこまで文字のウェイトの種類が用意されておらず、指定しても反映されないことも多いので、normalとblodの2種類が一般的に多く用いられます。
文字揃えの指定{text-align: ○○;}
文字を揃える方向を指定します。左揃えはleft、中央揃えはcenter、右揃えはrightを指定します。
外側の余白指定{margin: ○○;}
マージンと呼ばれる要素の外側の余白を指定します。単位にはpx、%がよく用いられます。
margin-topで上側のみ、margin-rightで右側のみ、margin-bottomで下側、margin-leftで左側のみを指定する事も出来ます。
また、値を指定せずに「auto」と自動指定することもあります。
左右のマージンをautoにしたブロックレベルの要素は通常、中央揃えになります。
内側の余白指定{padding: ○○;}
パディングと呼ばれる要素の内側の余白を指定します。単位にはpx、%がよく用いられます。
マージン同様に、padding-top/padding-right/padding-bottom/padding-leftとそれぞれの方向の余白のみ指定出来ます。
隣り合うマージンは相殺し合う特性があります。
境界線の指定{border: ○○ △△ □□;}
マージンとパディングの間の境界に引ける線を指定します。
指定する値は3つあり、線の色、線の太さ、線の種類です。順不同です。
線の色は16進数など、太さはpxなどで指定します。
線の種類は通常が「solide」、破線が「dashed」、点線が「dotted」、二重線が「double」などあります。 余白と同様に上下左右のみ指定出来る、border-top/border-right/border-bottom/border-leftがあります。
表示形式の指定{display: ○○;}
要素にはそれぞれインライン、ブロック、フレックスなどの表示形式があり、それを指定します。
インラインは文字や画像など、行内に横並びに並んで表示される形式で、display: inline;と指定します。
ブロックの要素は指定がなければその外側の幅100%に広がり、通常縦に積まれて表示されます。
他にもインラインブロック、グリッド、テーブルなどの表示形式があります。
左右に回り込ませる指定{folat: ○○;}
要素を右や左に寄せ、後続の要素を回り込ませます。
指定方法は、自身を右に寄せる場合に「float: right;」、自身を左寄せする場合に「float: left;」と指定します。
floatを指定した後はそれ以降の要素が回り込み続けるために回り込みの解除が必要です。
回り込み解除には「clear: both;」などが使われます。
またfloatとは浮かべるという意味の英語で、後続にブロック要素配置された場合に、浮かんでいるため高さを認識されず重なってしまう事があるので注意が必要です。
その場合でもブロックの中のテキストなどのインライン要素は回り込みの対象となります。
初心者向けの良く使うタグとして挙げていますが、floatは難易度が高いので、色々単独で試すとよいと思います。
特に回り込みをさせたいわけではなく、横並びにしたいという事であればFlexやinline-blockなどを学んで使用するとよいと思います。
HTML/CSSの基本タグ・プロパティはある程度覚えていきましょう
頻出タグをざっとまとめてみましたが、これらは本当に基礎レベルのものになっています。最低限これらはしっかり覚えておくようにしましょう。
もちろん、初心者の方は見ながら使いながらできっと覚えていくと思うので、「こんなに覚えられない 、、、」と嘆く必要はありません。
いくつかサイトの模写などしていくうちにきっと自然と身についているはずです。
他にもflexについてやmargin/paddingについて、article/sectionの違いなど書いた記事もあるので、ご参考頂ければと思います。
▼基礎から流れに沿ってしっかりコーディングを学びたいならこちらの書籍がおすすめです!
▼スマホ対応のレスポンシブやグリッドレイアウトなど基礎から応用まで学べる良書です。
最後までお読み頂きありがとうございました!