#はじめに
今回からはHTMLとCSSの勉強を踏まえウェブサイトを作っていきたいと思います。プログラミング言語の中では比較定期簡単らしいのでArduinoプログラムの内容よりわかりやすいと思います。
本題に入る前にヘッド部のコードを記述しておきましょう。titleやhrefの中身は自分に合ったものを設定しておいてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
ウェブサイト作成
</title>
<link rel="stylesheet" href="">
</head>
</html>
##ヘッダーの作成
まずは、ウェブサイトのヘッダーから作っていきたいと思います。今回作成するヘッダーはスクロールしても常に画面の上部に表示され続けるものです。タイトル、サブタイトル、お問い合わせフォームへと移るボタンの設置をHTMLとCSSの順に分けて行っていきます。
###HTMLのコーディング
ではあらかじめ記述しておいたHTMLのコードに以下のbody部を追記していきます。
<body>
<div class="header">
<a href="">
<img src="http://putiya.com/img/title/animal/felet/am_ft_2015_01_r8_c1.jpg" height="70" alt="title" class="title">
</a>
<div class="subtitle">
サブタイトル
</div>
<button type="button" class="btn-requsest">
お問い合わせはこちら
<a href="#request-form"></a>
</button>
</div>
</body>
sabtitleクラスとbtn-requestクラスはheaderクラスを親要素にもつ子要素へとすることでCSSで編集する際に個別に設定する必要がなくなります。
今回の内容ではお問い合わせフォームの作成までいかないので <a href… の行自体は現時点で何の役割も持ちません。
HTMLを記述しただけなので上から並べられた形となっているので、次のCSSでデザインを変更していきます。
###CSSのコーディング
次にCSSの記述を行っていきます。
.header
{
position: fixed;
top: 0;
right: 0;
left: 0;
height: 70px;
background-color: white;
z-index: 10;
}
まず、headerクラスを編集していきます。top、right、leftを0にしてpositionにfixedを設定することで画面上部に固定されたヘッダーの土台が出来上がります。
ヘッダーの固定ができたのでタイトルのイラストとサブタイトルの位置を指定していきます。
.header a img
{
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
padding: 0;
margin: 0;
}
.subtitle
{
position: absolute;
left: 200px;
bottom: 5px;
padding: 0;
margin: 0;
color: black;
}
タイトルイラストをtop: 50%に設定するとタイトルイラストの上部の辺が上から50％の位置に合わせられるためtransform: transulate(0,-50%)を加えます。こちらは、50％の位置からタイトルイラストの50％分上にずらすことができます。そのため、ヘッダー内の中心にタイトルイラストを設置できます。
次にお問い合わせフォームへと移るボタンを設置していきます。
.header button
{
position: absolute;
top: 50%;
right: 2.5%;
transform: translate(0,-50%);
padding: 1.5% 5%;
margin: 0;
color: white;
background-color: tomato;
border: none;
border-radius: 30px;
}
こちらもtransform: transulate(0,-50%)でヘッダーの中心に配置します。
border: none；を加えることで周囲の余計な線を消すことができ、border-radius: 30px; によってかわいらしく丸みの持つボタンにできます。
最後に気持ち程度のオリジナリティを出すためにお問い合わせフォームボタンの上にカーソルが乗ったときに色が変わるようにしてみます。
.header button:hover
{
background-color: orangered;
}
この数行だけなので簡単ですね！
完成です！
※わかりやすいように背景の色を変えています
確認はしづらいですが画面の上部に固定されたヘッダーができました。次回以降はこの続きから記述していこうと思います。