【初心者向け】HTML&CSSでコンテンツを作ってみよう

CSS

今まで以下の投稿で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の内側全ての方向に5pxの余白ができる*/
  padding: 5px;
  /* borderの外側全ての方向に10pxの余白ができる*/
  margin: 10px;
}

ボックスモデル

border, padding, marginは、ボックスモデルという概念に基いています。
HTMLではボックスと呼ばれる四角形の領域を生成します。各ボックスは、テキストや画像などの内容エリア(Content Area)を持っており、その周辺に、パディング(Padding)、ボーダー(Border)、マージン(Margin)の順に周辺エリアが有ります。エリアの大きさは、各プロパティによって指定する事ができます。

問合せフォームを作る

入力欄を作成

<input>要素, <textarea>要素

<input>要素は1行のテキスト入力を受け取るための要素です。
<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;
}

フリーランスを目指すなら【テックパートナーズカレッジ】

未経験者向けWEBスクール【SHElikes】

コメント