HTML&CSS プログラミング

【HTML&CSS】の全体構造【head】要素にはwebに関する設定を書く

投稿日:

こんにちは新札幌周辺情報です。今回から実際に上記の写真と同じサイトをHTMLとCSSを使って作っていくようです。webサイトには大まかにヘッダー、メイン、フッダーに区切られていて今回はヘッダー部分を中心にやっていきました。

HTMLのバージョンを宣言する

htmlファイルの一番上に<!DOCTYPE html>と記述すると、HTML5というバージョンを設定できます。HTML5というのは現在のところ最新らしいです。

 

<head>要素には設定に関する情報を書く

<hade>要素にはwebに関する設定を書いていくようです。この<hade>要素の中に<meta>・<title>・<link>の3つの要素を書き込んでいく必要があります。

<meta charset="utf-8">と書き込むことで文字化けを防ぐ効果があるとのこと。

<title>の要素にページのタイトルを書いていきます。

<link>要素を設定してHTMLファイルにCSSファイルを読み込ませることができます。今回は<link rel="stylesheet" href="stylesheet.css">と記述しました。

<body>要素に実際に書きたい内容を書いていく

まず<div>(division=ディヴィジョン)要素を使って全体のレイアウトを作っていきます。レイアウトは大まかにヘッダー、メイン、フッダーの3つに区切られているそうです。

今回はヘッダーにロゴやリストなどを作っていきます。

<body>タグの一番上に<div>タグを3つ作ってそれぞれに

<div class="header">

     <div class="header-logo"></div>

     <div class="header-list"></div>

  </div>

この形でclassをつけていきます。

そしてheader-listのclassがついた<div>の中に<ul>要素と<li>要素を追加します。

最終的にヘッダーにできたコードはこんな感じです。

<div class="header">

     <div class="header-logo">Progate</div>

     <div class="header-list">

       <ul>

         <li>プログラミングとは</li>

         <li>学べるレッスン</li>

         <li>お問い合わせ</li>

       <ul>

    </div>

  </div>

実際にできたプレビュー

今回HTMLとCSSで作った画面は上記の写真になりました。まだまだ完成には程遠いいですね。

自分で入力したHTMLのコード

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">    

<title>Progate</title>

<link rel="stylesheet" href="stylesheet.css">

</head>

<body>

   <div class="header">

     <div class="header-logo">Progate</div>

     <div class="header-list">

       <ul>

         <li>プログラミングとは</li>

         <li>学べるレッスン</li>

         <li>お問い合わせ</li>

       <ul>

    </div>

  </div>

 <div class="main">

 </div>

 <div class="footer">

 </div>

</body>

</html>

自分で入力したCSSのコード

body {font-family: "Avenir Next";}

li {list-style: none;}

.header {background-color: #f7f2b4;

height: 90px;}

.main {background-color: #bdf7f1;

height: 600px;}

.footer {

background-color: #ceccf3;

height: 270px;}

今回はここまで入力しました。たったこれだけを実装するのに結構な量を入力しなければならないのですね。著者はまだまだ未熟なのでかなり時間がかかってしまいました。

次回からこの続きをやっていきます。

-HTML&CSS, プログラミング

Copyright© 新札幌周辺情報 , 2020 All Rights Reserved Powered by STINGER.