HP作成の雛形に使える!HTMLとCSSをメモ帳で作るHP作成!

HP作成が出来ればウェブデザイン技能検定3級実技対策はばっちり!

前回の内容はこちら→ウェブデザイン技能検定3級実技対策

 

前回はヘッダーのリスト全体を横並びにしたところで、

ヘッダーのbackgroundが表示されなくなったという問題が起きたが、

原因がわかったので解説しておく。

 

floatプロパティについて

まず、この現象が起こった原因はfloatプロパティである。

floatプロパティで左寄せした要素は浮いた状態だという認識が必要だった。

header-logoとheader-listをfloatで左寄せしたので、この2つの浮いた要素の

スキマにmain要素が入り込んだ形になっていた。

headerは左寄せしていない→hederに表示されるはずの文字は浮いている。

→その間にメイン要素が入り込んだ。というイメージだ。

この現象は回り込むという表現がよく使われているようだ。

この回り込みは、回り込んでいる要素にclear:left;を追加することで回避できる。

すると、回り込みが回避され、headerのbackgroundが正常に反映された。

 

paddingについて

次はこの何とも言えない位置にあるheader-logoやheader-listの位置を調整する。

要素の余白を調整することで、適切な位置に調整することができる。

要素に余白を作りたいときはpaddingを使う。

「padding:値;」とすると、上下左右すべての方向に、値の大きさの余白が追加される。

上下左右ではなく、特定の方向にのみ余白を指定したい場合は、

「padding-top: 値;」「padding-bottom: 値;」「padding-left:値;」「padding-right: 値;」

とすることでその方向にのみ余白を持たせることができる。

指定したい値が方向ごとに異なる場合は、まとめて書くこともできる。

値を4つ、スペースで区切り指定した場合は、「上」「右」「下」「左」の

時計回りの順で適用される。

値を2つだけ指定した場合は「上下」「左右」の順に適用される。

 

これでヘッダーは完成!

次はフッターを作っていく。

ヘッダーでは<li>要素全体にfloatとpaddingを指定した。

しかしこれらは、フッターにも影響を及ぼす。

そこで、.header-listのあとにスペースを空けてliを続けることで、

「header-list」の中の<li>要素にのみCSSを適用することができる。

まずはフッターに<div>要素を追加し、フッターのロゴにクラス名を与え、

フッターロゴを「HP作成講座」にする。

さらにフッターリストの<div>要素を追加し、footer-listのクラス名を与える。

そして、fotter-listの中に<ul>要素を追加し、<ul>要素の中には<li>要素を3つ追加し、

上から順に、会社概要、採用、お問い合わせとする。

このままでは横並びになってしまうので、横並びの指定をheader-listの<li>にのみ

適用されるように指定する。

これでフッターのロゴとリストを作ることが出来た。

次はこのフッターのロゴとリストの位置を変える。

フッターのロゴは左に、リストは右に変更する。

ヘッダーの時はfloat:leftを使ったが、今度はフッターのリストに対して

float:right;を指定し、右側に寄せる。

フッターのbackgroundカラーや文字色も変更して、フッターっぽい雰囲気にした。

ついでに、スクショしたとき画面に収まらなくなったので

メインの高さを600pxから500pxに変更している。

これでフッターは完成だ!

続けてメインの部分のレイアウトを作っていく。

メイン部分では「copy」「contents」「contact-form」の3つの要素を作る。

ついでに文字の一部分だけの色を変える方法を解説しておく。

 

spanについて

文字の一部にだけCSSを適用したい場合は<span>要素で囲む。

spanタグにCSSを指定することで、文字の一部だけの色を変えることができる。

ちなみに、HTMLの要素には改行される要素とされない要素がある。

前後で改行が入り親要素の幅いっぱいに広がる要素をブロック要素という。

<div>や<a>のように改行されない要素をインライン要素という。

<span>もインライン要素になるため、改行されない。

ここでは、<h1>という要素を作り、簡単HP作成!という文字を入れ、

その文字の!の部分だけの文字色を変える。

ついでにメイン要素のbackgroundカラーの指定と高さを変更し、

h1とh2の文字色やサイズを指定する。

CSS

プレビュー

 

これで「copy」は完成!

続いて「contents」部分を作っていく。

<h3>要素を追加して「学習内容」とする。

さらに、,<div>属性を4つ追加し、4つとも<contents-item>のclass名を与える。

それぞれの<contents-item>に<img>要素を追加し、画像を表示させる。

追加した<img>要素の下にそれぞれ<p>要素を追加し、

HTMLについて、CSSについて、フレームワーク、実践、とする。

※画像のURLはFTPサーバで画像をアップロードしてURLを取得したものを利用している。

プレビュー

 

このままでは縦表示なので、画像を横表示に変更し、

<h3>のフォントやcontents-itemの余白などを調整していく。

プレビュー

お問い合わせフォームの作成

最後にお問い合わせフォームを作っていく。

まずはお問い合わせフォームのテキスト部分を作成し、

入力フォーム部分と、送信ボタンを追加する。

<input>要素は1行のテキスト入力を受け取るための要素である。

<textarea>要素は複数行のテキスト入力を受け取るための要素である。

<input>要素には終了タグが不要な点に注意。

送信ボタンにも<input>要素を用いる。

<input>要素にはtype属性を指定することができ、submitを指定すると

下のプレビューのような送信ボタンになる。

value属性に任意の値を指定することで、ボタンに表示されるテキストを

変更することができる。

複数のセレクタに同じCSSを適用したい場合は、(,)コンマで区切る。

これを用いて<input>要素と<textarea>要素に同じCSSを適用していく。

 

プレビュー

 

これで完成だ!

 

下記にHTMLとCSSを記述しておくのでコピペして、

必要な部分だけ変更すれば、同じような形のHPが作れる!

是非チャレンジしてみて欲しい。

 

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”uft-8″>
<title>HP作成講座</title>
<link rel=”stylesheet” href=”stylesheet.css”>
</head>
<body>
<div class=”header”>
<div class=”header-logo”>HP作成講座</div>
<div class=”header-list”>
<ul>
<li>HTMLとは</li>
<li>CSSとは</li>
<li>お問い合わせ</li>
</ul>
</div>
<div class=”main”>
<div class=”copy”>
<h1>簡単HP作成<span>!</span></h1>
<h2>メモ帳でHPは作れる!</h2>
</div>
<div class=”contents”>
<h3 class=”section-title”>学習内容</h3>
<div class=”contents-item”>
<img src=”http://souharu.sub.jp/html5-1841458__340.png”>
<p>HTMLについて</p>
</div>
<div class=”contents-item”>
<img src=”http://souharu.sub.jp/css3-1841488__340.jpg”>
<p>CSSについて</p>
</div>
<div class=”contents-item”>
<img src=”http://souharu.sub.jp/web-design-2038872__340.jpg”>
<p>フレームワーク</p>
</div>
<div class=”contents-item”>
<img src=”http://souharu.sub.jp/code-2558224__340.jpg”>
<p>実践</p>
</div>
</div>
<div class=”contact-form”>
<h3 class=”secsion-title”>お問い合わせ</h3>
<p>メールアドレス(必須)</p>
<input>
<p>お問い合わせ内容(必須)</p>
<textarea></textarea>
<p>※必須項目は必ずご入力下さい</p>
<input class=”contact-submit” type=”submit” value=”送信”>
</div>
</div>
<div class=”footer”>
<div class=”footer-logo”>HP作成講座</div>
<div class=”footer-list”>
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
</body>
</html>

 

 

CSS

body{
font-family: “Avenir Next”;
}

li{
list-style:none;

}

.header{
background-color:#f7f2b4;
height:90px;
}

.header-logo{
float:left;
font-size:36px;
padding: 18px 40px;
}

.header-list{
float:left;
}

.header-list li{
float:left;
padding: 20px 20px;
}

.main{
padding: 100px 80px;

clear:left;
}

.copy span{
color: #ff4a4a;
}

.copy h1{
font-size:50px;
}

.copy h2{
font-size: 30px;
}

.contents{
height:500px;
margin-top: 100px;

}

.contents-item{
float: left;
margin: 40px;

}

.contents-item p{
font-size :24px;
margin-top: 30px;
}

.section-title{
border-bottom: 2px solid #dee7ec;
font-size: 28px;

padding-bottom: 15px;

margin-bottom: 50px
}

.contact-form{
padding-top:100px;
}

input,textarea{
widht:400px;
margin-top: 10px;
margin-bottom: 30px;
padding: 20px;
font-size: 18px;
border: 1px solid #dee7ec;
}

.contact-submit{
background-color: #dee7ec;
color: #889eab;
}

.footer{
background-color:#2f5167;
color: #fff;
height:120px;
padding: 40px;
}

.footer-logo{
font-size:32px;
float:left;
}

.footer-list{
float:right;
}

.footer-list li{
padding-bottom: 20px;
}

 

まとめ

ウェブデザイン技能検定3級実技ではtable要素についても出題される。

table要素にについては次回解説する。


 

このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です