HTML＆CSS勉強備忘録⑥ーCSS適用前のHTMLコードの整理
こんにちは、今回はまずCSSを触っていく前に、HTMLの「class」などのコードを使って構造整理していこうと思います。
・<header>タグ
ヘッダーをまとめるためのタグ
・<footer>タグ
フッター部分をまとめるタグです。
・<main>タグ
意味をもたないタグで、どのような要素もまとめることができる。CSSを上手くまとめるためのもの。一つのHTMLファイル内で一回しか使えないという制限があります。
・<article>タグ
WEBサイトの中心部をまとめるのに使う。使用回数に制限はないです。
・<section>タグ
<div>タグよりは少し重要な意味合いを持たせたいときに使います
・<aside>タグ
ページ内あまり重要でない要素やサブ的なコンテンツー例えば広告やブログのコメント欄などまとめるのに使います。
・<nav>タグ
ここに複数のリンクを貼って主なページに行きやすくします。ナビゲーションの中には、箇条書きで記します。
これらを[class]を使ってコードの構造を整理します。
・参考
<!-- -->タグ
コード内にメモなどを残しおきたい時に使います。ここに文章を記述するとブラウザ上には何も表示されない。
<li>タグ
リストを作るには、<li>タグを使います。箇条書きにしたいテキストをそれぞれ<li>タグで囲むことで、リストを作ることができます。<ul>要素で囲むと、黒点が先頭につきます。
<ol>要素で囲むと、数字が１、２、３と連続でつきます。
EX
<!doctype html>
<html>
<!-- ヘッダー開始 -->
<head class="header">
<meta charset="UTF-8">
<title>YUTAKUの障害特性理解</title>
</head>
<!-- ヘッダー終了 -->
<body>
<h1>YUTAKUの障害特性理解サイト</h1>
<h2>～社会復帰を目指して～</h2>
<head class="header">
<nav class="nav">
<ul>
<li><a href="index2.html">ホーム</a></li>
<li><a href="profile.html">プロフィール</a></li>
<li><a href="ADHD.html">ADHDとうつ病とは</a></li>
<li><a href="problem.html">困りごと</a></li>
<li><a href="request.html">配慮をお願いしたいこと</a></li>
</ul>
</nav>
</header>
<h3>このサイトを開設した目的</h3>
<p>私は社会人になってから、うつ病、ADHD傾向と診断されました。現在は障がい者枠での就労も考えています。このサイトを作成する過程を通して、自分の障害を理解することを目的としています。</p>
<p>また、同じような悩みを持つ方のきっかけやヒントになることができれば幸いです。Noteでも発信をしているのでそちらもご覧下さい。<a href="https://note.com/yutaku">https://note.com/yutaku</a></p>
<img src="Image/YUTAKU.jpeg">
</html>
これを実際に動かすとこうなります。ブラウザ内にclass内に書かれたコードは表示されません。
何故この作業をやるかというと、コードを読みやすくする、CSS適用がやりやすくするためです。また、今回、フッターは設定していないのでコードに含めていません。
次回こそ、CSSに入ることができればと思います。
よろしくお願いします！
この記事が気に入ったらサポートをしてみませんか？