【初心者向け】HTML／CSSの基礎3
どうもhiroakiです。
今回は前回に続き、ウェブページを作るうえで大切な、HTML言語とCSS言語の基礎についてまとめていきます。
Lesson5
HTMLファイルには決められた型を書いていく必要があります。下記のように<html>要素の中に<head>と<body>要素が必要です。
<!DOCTYPE html>宣言は、これからHTML５で書いていきますと宣言するものです。その後、<html>要素の中に、<head>と<body>を作って、ウェブページを作っていきます。
<head>にはページの設定に関する情報を書きます。設定なので、<head>部分はウェブページに直接表示されないと覚えてください。
4.行目は文字コードの指定をしています。文字コードを指定することで、ページの文字化けを防ぐことができます。 UTF-8は、HTML5で推奨されている文字コードです。
5.行目はページタイトルの設定をしています。タイトルを設定すると、ブラウザのタブ上で表示されます。
はてなブログでは「設定」画面の「about」ページでもtaitle要素を編集可能です。
6.行目は作成したCSSファイルを読み込んでいます。「rel」でスタイルシートファイルを読み込みますと宣言し、読み込み先は「href」で指定します。この設定は、はてなブログでは不要です。
ところでみなさん、「charset」や「rel」ってどっかでみたことがある気がしませんか。以前、記事で<a>要素に属性を指定できるとお伝えしましたが、その属性です。こちらから復習しといてください。
こちらの記事も参考に。
<body>にはウェブページに表示する内容を書いていきます。はてなブログの「HTML編集」画面は<body>部分の中にあると思ってください。
Lesson6
次にbody部分へ入ります。
- <body>
- <div class="header"></div>
- <div class="main"></div>
- <div class="footer"></div>
- </body>
<div>は以前紹介しましたね。この要素は特に意味があるわけではありませんが、このようにclassを指定することで<body>で表現する部分を記事のヘッダやメイン、フッタとして指定できます。
実は、はてなブログの「HTML編集」部分はこの「メイン部分」にあたります。また、ヘッダやフッタは「デザイン」ページから指定できます。試してみてください。
Lesson7
次にヘッダ部分を作ってみます。サイトのこの部分です。
完成イメージ
「デザイン」部分の「ヘッダ」欄とCSS欄に赤字部分を追加してみてください。ヘッダ部分が変化するのが確認できると思います。
ちなみにCSSの「list-style: none;」部分でリストの中点（・）を消すことができます。セレクタの部分でクラスを指定し、その中の<li>要素のプロパティを指定するという書き方をしてください。
また、HTMLでは<li>要素内のテキストを変えてみることで、自分の好みの文字を表示させてみてください。
このままでは、ちょっと使えそうにないと感じるかもしれません。ロゴの部分なんて重複してますしね(笑)
しかし練習なんで構わずやってみましょう。
今回はこの辺で！
次回も基礎的なことを紹介していきます。自分も学びながら紹介しているので、ご指摘やご意見ありましたら、コメントくださるとうれしいです。
では。
