今まで以下の投稿でHTMLとCSSの基礎について説明してきました。
これらを組み合わせて簡単なWebページを作ってみましょう。
mainの構造
main部分を作っていきましょう。
main要素は、「header-container」、「contents」、「contact-form」の3つの要素で構成していきましょう。
<div calss="header-container">
<!-- ヘッダーコンテナ -->
nabelog。
</div>
<div calss="contents">
<!-- コンテンツ -->
</div>
<div calss="contact-form">
<!-- コンタクトフォーム -->
</div>文字の一部のみCSSを適用させる
header-containerの中の「nabelog。」という文言の、句点（。）のみ色を変えてみましょう。
文言の一部のみに別のCSSを適用する方法を考えてみましょう。
<span>要素
文言の一部にのみCSSを適用させたい場合は、<span>要素で囲みます。
<span>タグにCSSを指定することで、文字の色を一部変えることができます。
<span>要素はインライン要素のため前後には改行は入りません。逆に<div>要素はブロック要素のため改行が入ります。
インライン要素、ブロック要素については後述します。
<!-- index.html -->
<h1>
ようこそ<span>nabelog</span>へ
</h1>/* stylesheet.css */
span {
color: #d00;
}インライン要素・ブロックレベル要素
HTMLで定義されている要素のうち、<body>～</body>の中で使用される要素は、改行される要素と改行されない要素に別れます。
前後で改行が入り、親要素の幅を継承し、同じ幅になる要素をブロックレベル要素（Block-Level Elements）といいます。<div>要素や<h1>要素、<p>要素はブロックレベル要素です。また、<span>要素や<a>要素のように改行されない要素をインライン要素（Inline Elements）と呼ばれます。
枠線 【borderプロパティ】
要素に枠線をつけるには、borderプロパティを使用します。枠線の太さ、種類、色を指定して使用します。
上下左右すべてに線を付けたい場合はborderのみを記載し、特定の場所にのみ付けたい場合は「border-bottom」のように、「border-方向の英語」と記載します。
その他にborder-top、border-left、border-rightなどがあります。
<!-- index.html -->
<div class="border1">
nabelog
</div>
<div class="border2">
nabelog
</div>/* stylesheet.css */
/* 10px(太さ)、solid(種類)、red(色)で指定。borderで指定したため枠線で囲まれる。 */
.border1 {
border: 10px solid red;
}
/* 5px(太さ)、solid(種類)、#ff4a4a(色)で指定。border-bottomで指定したため下線のみが表示される。 */
.border2 {
border-bottom: 5px solid #ff4a4a;
}外側の余白 【marginプロパティ】
以前paddingを使って余白を作ると説明しましたが、paddingはborderの内側の余白を作成します。
borderの外側に余白を作る場合、marginを用います。
値の指定の方法については、paddingと同様です。
<!-- index.html -->
<div class="margin1">
nabelog
</div>/* stylesheet.css */
.margin1 {
border: 3px solid #ff0000;
/* borderの内側全ての方向に５pxの余白ができる*/
padding: 5px;
/* borderの外側全ての方向に１０pxの余白ができる*/
margin: 10px;
}ボックスモデル
border, padding, marginは、ボックスモデルという概念に基いています。
HTMLではボックスと呼ばれる四角形の領域を生成します。各ボックスは、テキストや画像などの内容エリア（Content Area）を持っており、その周辺に、パディング（Padding）、ボーダー（Border）、マージン（Margin）の順に周辺エリアが有ります。エリアの大きさは、各プロパティによって指定する事ができます。
問合せフォームを作る
入力欄を作成
<input>要素, <textarea>要素
<input>要素は１行のテキスト入力を受け取るための要素です。
<textarea>要素は複数行のテキスト入力を受け取るための要素です
<input>要素は終了タグが不要な点に注意してください。
<form>
<p>単数行入力</p>
<input>
<p>複数行入力</p>
<textarea>
</textarea>
</form>送信ボタン 【type属性】
送信ボタンにも、<input>要素を使用します。
<input>要素にはtype属性を指定でき、type属性にsubmitを指定すると、単数行入力でなく、ボタンになります。
ボタンに表示されるテキストは、日本語のブラウザではデフォルトで「送信」になります。
<input type="submit">ボタンの文言指定 【value属性】
value属性に任意の値を指定することで、ボタンに表示されるテキストを変更することができます。
<input type="submit" value="ボタン">複数のセレクタにCSSを適用
複数のセレクタをコンマ（,）で区切ることで、それらに同じCSSを適用することができます。
<!-- index.html -->
<h1>ようこそ</h1>
<p>nabelogへ</p>/* stylesheet.css */
h1,p {
font-size: 10px;
}まとめ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nabelog</title>
<link href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-logo">nabelog</div>
<div class="header-list">
<ul>
<li>プログラミングとは</li>
<li>学べるレッスン</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>プログラミングの世界へようこそ</h2>
</div>
<div class="contents">
<h3 class="section-title">学べるレッスン</h3>
<div class="contents-item">
<img src="https://nabelog.XXXXXXXXX.png">
<p>HTML & CSS</p>
</div>
<div class="contents-item">
<img src="https://nabelog.XXXXXXXXX.png">
<p>PHP</p>
</div>
<div class="contents-item">
<img src="https://nabelog.XXXXXXXXX.png">
<p>Ruby</p>
</div>
<div class="contents-item">
<img src="https://nabelog.XXXXXXXXX.png">
<p>Swift</p>
</div>
</div>
<div class="contact-form">
<h3 class="section-title">お問い合わせ</h3>
<p>メールアドレス（必須）</p>
<!-- <input>要素を追加してください -->
<input>
<p>お問い合わせ内容（必須）</p>
<!-- <textarea>要素を追加してください -->
<textarea>
</textarea>
<p>※必須項目は必ずご入力ください</p>
<!-- <input>要素を追加してください -->
<input class="contact-submit" type="submit" value="送信">
</div>
</div>
<div class="footer">
<div class="footer-logo">nabelog</div>
<div class="footer-list">
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
</body>
</html>body {
font-family: "Avenir Next";
}
li {
list-style: none;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
padding: 100px 80px;
}
.copy-container h1 {
font-size: 140px;
}
.copy-container h2 {
font-size: 60px;
}
.copy-container span {
color: #ff4a4a;
}
.contents {
height: 500px;
margin-top: 100px;
}
.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}
.contents-item {
float: left;
margin-right: 40px;
}
.contents-item p {
font-size: 24px;
margin-top: 30px;
}
.contact-form {
padding-top: 100px;
}
/* inputとtextareaのCSSを指定してください */
input,textarea {
width:400px;
margin-top:10px;
margin-bottom:30px;
padding:20px;
font-size:18px;
border:1px solid #dee7ec;
}
/* contact-submitのCSSを指定してください */
.contact-submit {
background-color:#dee7ec;
color:#889eab;
}
.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}
.footer-logo {
float: left;
font-size: 32px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 20px;
}
コメント