今回は超簡単なホームページを作っていきます( ^ω^ )
使う言語はHTMLとCSSのみです。どちらも基礎的な部分さえ理解できていれば簡単にホームページを作成することができるんです。
それでは早速やっていきましょう٩( 'ω' )و
目次
[1.目的](#1目的) [2.レイアウトを考えよう](#2レイアウトを考えよう) [3.ヘッダーを作ろう](#3ヘッダーを作ろう) [4.メイン部分を作ろう](#4メイン部分を作ろう) [5.サブメニューでページ内遷移を！](#5サブメニューでページ内遷移を) [6.気持ち程度にフッターを作っておこう](#6気持ち程度にフッターを作っておこう) [7.まとめてみよう](#7まとめてみよう)#1.目的
まず目標はHTMLとCSSの基礎を押さえた人が、ホームページのレイアウトから中身まで１から作れるようにステップアップすることです。
HTMLやCSSが何なのか、どう書くのかわからないという人は少し難しい話になるかもしれませんが、ホームページの作成手順を知る程度だけでも見ていただけると嬉しいです。＾＾
#2.レイアウトを考えよう
さて、ホームページを作る上で第一に考えなくてはならない最初の作業、それはレイアウトを決めることです。ホームページは言うなれば一つの作品です。どんな作品もどんなデザインにしようかをまず初めに考えるはず！それと同じようにどんなホームページにしようかというレイアウトの構想が非常に重要となります。
今回は例として上の図のようなレイアウトを考えます。
- ヘッダー部分
- ホームページの見出しやメインメニューを配置するいわばサイトの看板となる部分。
- メイン部分
- ホームページの内容を作成していきます。
- サブメニュー部分
- メイン部分を快適に見れるように目次のようなものを作成してページ内遷移ができるようにしたり、メイン部分を見る上で助けになるような機能を持たせます。
- フッター部分
- ヘルプや問い合わせフォームへのリンクやコピーライトを作成します。
今回はサブメニュー部分はページ内遷移のみ、フッター部分はコピーライトのみ作成します。
レイアウトの構想が終わったら、このレイアウトを満たす骨格を作っていこうと思います。
まずは以下のコードと結果を見てください。
See the Pen レイアウト by Charme (@charme0525) on CodePen.
HTML
- ヘッダー内容・メイン内容・サブメニュー内容・フッター内容にそれぞれクラスを与えることでエリアごとに差分化しています。
CSS
- ページ全体をグリッドレイアウトとし、今回はエリアごとに名前を付けて配置していくグリッドエリアを使用しています。
グリッドレイアウトにするためには、グリッドレイアウトにしたい要素(今回ではクラス:Topの範囲内)に
display:grid;と記述する。grid-template-areas: ”エリア名 エリア名” ”エリア名 エリア名” “エリア名 エリア名”;今回では上記のようにして3x2のグリッドを作り、各エリアごとに名前を付けていきます。
次に、各divタグのクラスにgrid-are:エリア名;を記述すると、この指定したエリア名と対応するgrid-template-areasのエリア名の位置に配置されるようになります。
#3.ヘッダー部分を作ろう
ホームページのどこに何を配置するか決まったら今度は看板となるヘッダー部分を作成していきましょう。
See the Pen Untitled by Charme (@charme0525) on CodePen.
HTML
-
h1タグで見出しを作り、メニューはリストタグのulタグでリストを作っています。そして、メニューはクリックすれば指定のリンクに飛ぶように設定したいのでaタグでメニューの各要素であるliタグを囲います。 今回はホームページのトップ画面のみの作成のため、リンク先は指定しておりません。 CSS
- クラスheaderの中身を
display:flex;より、フレックスボックス化します。これは、headerの中身、つまりh1とulをフレックスボックスにして横並びにしているということです。これにより、下に示すように見出しとメニューが横並びになりましたが、これだけではまだHome・About・Topicsが縦の状態です。なお見出しとメニューはalign-items:center;とすることで上下の中央に配置しています。See the Pen Untitled by Charme (@charme0525) on CodePen.
次に
ulもdisplay:flex;としてみます。See the Pen Untitled by Charme (@charme0525) on CodePen.
ちゃんとメニューも横並びになりましたね。 さて、リストタグの「・」が邪魔ですよね。あとaタグ特有の下線とクリックすると色が変化するのも消したいと思います。See the Pen Header-sample by Charme (@charme0525) on CodePen.
list-style:none;でリストの「・」を非表示にすることができます。text-decoration:none;でリンクの下線を消すことができ、クリックすると色が変化するのは、color:orange;で文字色を変えるだけで防ぐことができます。
4.メイン部分を作ろう
See the Pen main by Charme (@charme0525) on CodePen.
ここでは各セクションごとの見出しとその文章のみの構成となっているため特に解説はないですが、HTMLコードでセクションの見出しにid="数字"としているのは次のサブメニューのページ内遷移で使うからです。
本文には必要に応じて<img src="画像のパスorURL">を使用して画像や図を貼ることもできます。
#5.サブメニューでページ内遷移を！
See the Pen サブメニュー by Charme (@charme0525) on CodePen.
実際に上のResultでサブメニューをクリックしてページ内遷移するかどうか確かめてみてください。 無事ページ内遷移がご確認いただけたと思います。HTML
- 先ほどのセクションの見出しにつけたidを`aタグ`のリンク先に
href="#id名"と`#`をつけて記述することで、そのidを持つ要素に飛ぶことができるのです。 CSS
-
border:solid 5px color;でその要素を囲むように長方形の枠が5pxの太さで表示されるということです。colorは何も書かなければデフォルトでblackが入ります。
#6.気持ち程度にフッターを作っておこう
どこのウェブサイトにもフッターにコピーライトを設置しているのをよく見かけますよね。あれは著作権保護のためつけているのですが、webサイトはコピーライトがなくても作成された瞬間から著作権が生まれますのでなくても大丈夫なのです。ですが、コピーライトをつけてるだけでホームページ感が増すので気持ち程度につけておきましょう( ͡° ͜ʖ ͡°)
See the Pen フッター by Charme (@charme0525) on CodePen.
©とすることで©となります。また、フッターの高さをheight:50px;にすることでpadding-top:25px;で上下の中央に配置することができ、text-align:center;で左右中央に配置できます。
#7.まとめてみよう
これで、ヘッダー部分・メイン部分・サブメニュー部分・フッター部分ができ上がったので全部繋げてみましょう。
See the Pen Sample homepage by Charme (@charme0525) on CodePen.
という感じになりました。
とりあえず、ホームページの作り方-基礎編は以上となります。今回のはホームページとしてかなり雑なもの(サブメニューの余白等々)なので、次回はデザイン面やCSSのみを使ったアニメーションの作り方を載せていこうと思います。
最後までお付き合いいただきありがとうございました(( _ _ ))..zzzZZ