【初心者向け】HTML／CSS中級1 - 気ままに趣味旅行

どうもhiroakiです。

今回は前回に続き、ウェブページを作るうえで大切な、HTML言語とCSS言語の中級編についてまとめていきます。中級編では基礎編より、少し踏み込んで説明していきます。説明の部分が多くなりますが、実際にコードを打ちながら試すことが大切です。

①セクションを表すタグについてまとめます。この内容は基礎編でもよかったくらいです。それくらい大事なところなので覚えてください。

HTMLにはセクション（区切り）タグというものがあります。

セクションを表すタグ
article	内容が単体で完結するセクション。ブログのエントリー、新聞や雑誌のひとつの記事など。
aside	本筋からは外れる内容。そのページの補足情報や広告など。
nav	サイトの主要なナビゲーションを表すセクション。
section、div	上記のどれにも当てはまらない。

見た目は変わらないのですが、これらタグはプログラムに「ここが記事本編、ここが補足情報だよ」と教える役目を持ちます。こうすることで、ブラウザでどこに主要なコンテンツがあるか示します。これが後々効いてきますので、覚えておいてくださいね。

②次は構造を表すタグです。

構造を表すタグ
header	ヘッダ部分。セクションの見出しや導入部分、ページのロゴやタイトル、目次、検索フォームなど。
footer	フッタ部分。記事を書いた人の名前や関連リンク、コピーライトなど。

以前下の記事でクラスを使ってヘッダ部分を指定しましたね。

しかし、次のように指定することもできます。こちらの方がすっきりしていいですね。

CSSは外部ファイルから読み込むことが多いです。さて、下記コードは、はてなブログのデザイン設定画面にある「{}デザインCSS」に元から書いてあるコードです。

@import部分はテーマデザインの読み込みです。あとの部分はコメントでしたね。

現在、この「{}デザインCSS」に書いたコードは無条件にbody部分に反映されてますが、本来ならばHTMLの<head>要素で、CSSファイルを「読み込みます」という宣言をしなければいけません。

しかしこの部分はすでに設定されてますので、いじる必要がないんですね。

<head>と<header>は全くべつものなので、忘れた人は下記の記事をもう一度おさらいしてくださいね。

実は、CSSを外部ファイルに書く以外にも、次の方法でもCSSを書くことができるんです。

①インラインでstyle属性を記述する方法

以前の記事で紹介しましたが、デザインを直接指定したいタグへ「style=""」を挿入します。

②<head>タグ内に書き込む方法

中級編ではあまりおすすめしませんが、もしいじりたい場合は設定画面から変更可能です。下記画像を参考にしてください。

f:id:hiroakies4463:20181120110513j:plain

f:id:hiroakies4463:20181120110514j:plain

次はborderプロパティに関して、と言いたいところですが、これは覚えなくてもいいかなという感じです。こういうのがあったな程度に忘れたら戻ってきてください。