HTML（HyperText Markup Language）とCSS（Cascading Style Sheets）は、ウェブ開発において重要な役割を果たす2つの言語です。HTMLはウェブページの構造やコンテンツを定義するためのマークアップ言語であり、CSSはウェブページのスタイルやレイアウトを指定するためのスタイルシート言語です。これら2つの言語は、ウェブ開発者が魅力的で使いやすいウェブページを作成するために密接に連携しています。
- HTMLの役割
- CSSの役割
- HTMLの特徴
- HTMLでよく使われるタグ
- CSSの特徴
- CSSでよく間違えるプロパティ
HTMLの役割
HTMLは、ウェブページの骨格となる要素を定義します。テキスト、画像、ビデオ、リンクなどのコンテンツをタグを使用してマークアップし、それらのコンテンツを階層構造で組織化します。HTMLはウェブブラウザに対して「これが見出しです」「これは段落です」「これは画像です」といった情報を提供し、コンテンツの意味を伝えます。基本的なHTMLタグには<html>、<head>、<title>、<body>、<h1>〜<h6>、<p>、<img>、<a>などがあります。
CSSの役割
一方、CSSはHTMLで作成されたコンテンツの見た目を装飾します。文字の色やフォント、背景色や画像、要素の位置やサイズなど、視覚的なスタイルを指定します。CSSはHTMLとは別のファイルに記述されることが一般的であり、HTML内で<style>タグや外部のCSSファイルとして参照されます。CSSは、ウェブページに一貫性のあるデザインやレイアウトを与えることができます。また、CSSの利点は、スタイルの変更が容易であり、1つのスタイルシートが複数のHTMLページで再利用できることです。
HTMLの特徴
最初よく間違えるところが、「index.html」というファイル名ですが、これを練習時に例えば、「練習.html」や「web.html」などに変更して自分でわかりやすくしてませんか？
実はindex.htmlを使う理由があります。それは、一般的にエントリーポイントとして使用されるからです。多くのWEBサーバーは、index.htmlを省略してURLのみでも自動的にindex.htmlを表示させます。
例えば：domain.jpといったドメインがあったとして、皆さんここにアクセスした際、「https:domain.jp/index.html」と入力しているわけではないですよね。domain.jpだけでアクセスしているはずです。
index.htmlは省略できる数少ないファイル名ですので、ぜひ実践でも意識して活用してみてください。
また、みんな大好きgoogle先生の検索順位対策でもhtmlファイルをソースとして読み込んで、記憶しておりますので、検索エンジン対策でも必要な設定を主にhtmlファイルに記載することが多いです。
HTMLでよく使われるタグ
ヘッダータグ (<h1> – <h6>)
これは見出しタグとも呼ばれています。数字順に使用レベルが設定されています。
また、それぞれの設定には、検索エンジン対策も意識して設定してください。
例えば、h1タグはメインタイトルで、h2タグはサブタイトルというようにページ毎に設定する必要があります。これはgoogle先生がどのタグが重要なキーワードなのか認識するために設定します。
なんでも使える汎用タグ(div)
<div>タグは、HTML内の要素をグループ化するための汎用的なコンテナ要素です。<div>タグは特定の意味を持つタグではなく、単に要素をブロックとしてグループ化するために使用されます。
<div>タグは開始タグ<div>と終了タグ</div>の間に他のHTML要素やテキストを配置することができます。<div>タグはセマンティックな意味を持たないため、任意のスタイルやクラスを適用することができます。また、CSSやJavaScriptを使用して<div>要素を操作するのにも便利です。
以下は、<div>タグを使用して複数の要素をグループ化する例です。
See the Pen html.div by b (@susuki2022) on CodePen.
リンクタグ (<a>)
ページ内または外部のリンクを作成します。
href属性にリンク先のURLを指定します。
例: <a href="https://example.com">リンクテキスト</a>
画像タグ (<img>)
画像を表示します。
src属性に画像のURLを指定します。
例: <img src="image.jpg" alt="画像の説明">
リストタグ (<ul>, <ol>, <li>)
順序なしリスト(<ul>)や順序付きリスト(<ol>)を作成します。
リストの項目(<li>)はリストタグの中に配置します。
例：
See the Pen html.list by b (@susuki2022) on CodePen.
CSSの特徴
CSSはウェブページの見た目やスタイルを設定するための言語です。要素を選択してスタイルを適用し、レイアウトやアニメーションを設定できます。
WEBデザインには欠かせないツールですが、最初はここに躓くことも多いので、細かい枝分かれを注意して繰り返し勉強してほしいところでもあります。
CSSでよく間違えるプロパティ
今までの経験上、特に「display」と「position」が理解できずにレイアウトやデザインができないことが多い気がします。
逆に言えば、この二つを克服することで、WEBデザインで困ることが少なくなると思います。
display
まずはdisplayですが、大きく要素の配置に関係しており、２つの考え方で構成されています。
「要素本体を操作する場合」と「子要素を操作する場合」に分かれています。
要素本体を操作したい時は、
block:- 要素をブロックレベルで表示します。
- 要素は新しい行に配置され、幅は親要素の幅いっぱいを占有します。
widthやheight、marginやpaddingなどのプロパティを指定できます。
inline:- 要素をインラインレベルで表示します。
- 要素は前後のインライン要素と同じ行に配置されます。
- 幅や高さはコンテンツに応じて自動的に調整されます。
widthやheight、marginやpaddingの上下の値は反映されません。
inline-block:- 要素をインラインレベルで表示しますが、ブロック要素の性質も持ちます。
- 要素は前後のインライン要素と同じ行に配置されますが、幅や高さ、
marginやpaddingなどのプロパティを指定できます。
none:- 要素を非表示にします。要素が削除されたかのようにスペースも消去されます。
- ただし、他の要素に対しては影響せず、DOM構造は維持されます。
- 多用しすぎると、google先生にペナルティを課せられます。仕方がないところ以外は使わない。
子要素を操作したい場合は、
flex:- 要素をフレックスコンテナとして表示します。
- フレックスボックス内の要素は、メイン軸やクロス軸に沿って柔軟にレイアウトされます。
flex-directionやjustify-content、align-itemsなどの追加のプロパティを使用してレイアウトを調整できます。
grid:- 要素をグリッドコンテナとして表示します。
- グリッドレイアウトを使用して要素をグリッドセルに配置できます。
grid-template-columnsやgrid-template-rows、grid-gapなどのプロパティを使用してグリッドの構造を定義できます。
displayに関しては、上記の細かいルールを理解しておいてください。一つ一つが後でボディブローのように効いてきます。
position
CSSのpositionプロパティは、要素の配置方法を指定するために使用されます。positionプロパティを使用することで、要素の配置を自由に制御することができます。ただし、要素の配置が他の要素に影響を与える場合は注意が必要です。また、positionプロパティを適用するためには、top、bottom、left、rightなどの追加のプロパティも使用することが一般的です。
positionプロパティには以下の値があります。
static:- デフォルトの値です。
- 要素は通常のドキュメントフローに従って配置されます。
top、bottom、left、rightなどのプロパティは無効です。
relative:- 要素を通常のドキュメントフローに基づいて配置しますが、位置を相対的に調整することができます。
top、bottom、left、rightなどのプロパティを使用して位置を指定できます。- 相対位置の変更は、他の要素の配置に影響を与えずに行われます。
absolute:- 要素を通常のドキュメントフローから取り外し、親要素や兄弟要素に対して配置を行います。
top、bottom、left、rightなどのプロパティを使用して位置を指定します。- 親要素が
relativeやabsoluteの場合、その位置を基準に配置されます。
fixed:- 要素をビューポートに対して固定位置に配置します。
- スクロールしても要素は画面上に固定されます。
top、bottom、left、rightなどのプロパティを使用して位置を指定します。
sticky:- 要素がビューポート内でスクロールされる範囲内で固定位置に配置されます。
- スクロールすると通常のドキュメントフローに従って移動します。
top、bottom、left、rightなどのプロパティを使用して位置を指定します。
position: relative;の場合
See the Pen Untitled by b (@susuki2022) on CodePen.
position: absolute;の場合
See the Pen Untitled by b (@susuki2022) on CodePen.
まとめ
最初は一度に覚えようとせず、まずは、「relative」と「absolute」の値から覚えて使い慣れると良いです。
HTMLとCSSは密接に連携して、ウェブページを作成します。HTMLはページの構造を定義し、CSSはその構造に対してスタイルを適用します。つまり、HTMLは情報の意味を伝え、CSSは見た目やレイアウトを制御します。ウェブ開発者はHTMLとCSSを組み合わせて使い、ユーザーに魅力的で使いやすいウェブ体験を提供することが求められます。
まずは上記記事を参考に日々の勉強に励んでください。