株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | CSS基礎 その3

2017.11.18

CATEGORY - web

では、前回の続きでもそもそやっていきたいと思います。

今回はそんなに説明することもないので、ひととおり1画面作っていきます^^

CSS基礎

1. ABOUT部分

HTMLには、こんな感じでクラスを指定しました。

<!-- ABOUT -->
<section class="section-area">
  <h2 class="section-heading">
    <p class="main-text">ABOUT</p>
    <p class="sub-text">アプリについて</p>
  </h2>
  <div class="about-block is-point-1">
    <div class="column-left">
      <img src="assets/images/top/about_1.png" alt="モコランニング" width="250">
    </div>
    <div class="column-right">
      <h3 class="about-title">
        mocoキャラがランニング中に応援してくれる!
      </h3>
      <p class="about-text">
        1kmごとにお気に入りのキャラが声援を送ってくれるよ!<br>
        お気に入りの声優さんを見つけるのも楽しみのひとつ♩
      </p>
    </div>
  </div>
  <div class="about-block is-point-2">
    <div class="column-left">
      <h3 class="about-title">
        ランニングを続けられる機能が満載!
      </h3>
      <p class="about-text">
        ポイントを使って新しいmocoキャラを呼び出そう!<br>
        毎月のランキングでモチベーションもUP!
      </p>
    </div>
    <div class="column-right">
      <img src="assets/images/top/about_2.png" alt="モコランニング" width="250">
    </div>
  </div>
</section>

※ about-block の部分で、HTMLの基礎のときは、[画像 – テキスト] の順で並べましたが、デザインで、下のブロックの方が、画像が右側にくる形になるので、構造を少し変えています。

では、CSS部分です。

/* セクション */
.section-area {
  max-width: 960px;
  margin: 40px auto 0;
}

.section-heading {
  text-align: center;
  color: #0071bc;
  position: relative;
  padding-bottom: 5px;
}

.section-heading .main-text {
  font-size: 28px;
}

.section-heading .sub-text {
  font-size: 14px;
  font-weight: normal;
}

.section-heading:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  border-bottom: 3px solid #0071bc;
}

/* ABOUT */
.about-block {
  display: table;
  width: 100%;
  table-layout: fixed;
  text-align: center;
  margin-top: 30px;
  background: #f6f6f6;
  padding: 20px;
  border-radius: 4px;
}

.about-block .column-left {
  display: table-cell;
  vertical-align: middle;
}

.about-block .column-right {
  display: table-cell;
  vertical-align: middle;
}

.about-block .about-title {
  font-size: 26px;
}

.about-block .about-text {
  margin-top: 20px;
}

.about-block.is-point-1 .column-left {
  width: 280px;
}

.about-block.is-point-2 .column-right {
  width: 280px;
}

セクション部分は、共通で使えるようにしてます。基本的な枠組みとタイトルの部分ですね^^

主なところみていきたいと思います。

margin: 40px auto 0;

margin 自体は、要素に対して、上下左右にどれだけのマージン(要素の外側の余白)を入れるかを指定するのですが、今回説明したいのは、その部分ではなく。
要素を左右に中央寄せにしたい場合、

 

margin: 0 auto;

 

と指定すると、中央配置になります。

margin の値は、4つで指定するときは、 上、右、下、左 の余白を指定します。
2つで指定するときは、上下、左右 の予約を指定します。

この指定だと、上下のマージンを”0″に、左右のマージンを”auto” -> これにすると左右に中央配置になります。

今回は、上に 40px 分のマージンをいれたかったので、40px auto 0 になってます。
ちなみに、最後の、4つめの値ないじゃん!って思われたかたいるかもしれないですが、左の値が右の値(つまり auto)と一緒の場合、省略可能です^^

display: table

テーブル組のように表示することができます。

テーブルレイアウト

こんな感じで、

大枠: table
 行: table-row
  行の中の列: table-cell

で表します。

今回は、1行しかないので、table-rowは省略して、table-cell だけ使用してます。
table-cell は vertical-align が効くので、縦方向に中央寄せにしてます^^

また、親の要素に、 talbe-layout: fixed を指定しておくと、親要素に対して、100%に広がってくれます。

border-radius

これもよく使いますね^^ 角丸の大きさを指定できます。

2. CHARACTOR部分

キャラクター紹介部分のHTMLです。

<!-- CHARACTOR -->
<section class="section-area">
  <h2 class="section-heading">
    <p class="main-text">CHARACTOR</p>
    <p class="sub-text">キャラクター紹介</p>
  </h2>
  <ul class="charactor-list">
    <li>
      <div class="charactor-icon">
        <img src="assets/images/chara/icon_1.png" alt="一ノ瀬麻衣" width="220">
      </div>
      <div class="charactor-name">
        一ノ瀬麻衣
      </div>
    </li>
    <li>
      <div class="charactor-icon">
        <img src="assets/images/chara/icon_2.png" alt="平山彩菜" width="220">
      </div>
      <div class="charactor-name">
        平山彩菜
      </div>
    </li>
    <li>
      <div class="charactor-icon">
        <img src="assets/images/chara/icon_3.png" alt="橘あかり" width="220">
      </div>
      <div class="charactor-name">
        橘あかり
      </div>
    </li>
    <li>
      <div class="charactor-icon">
        <img src="assets/images/chara/icon_4.png" alt="ナンナ・リモノフ" width="220">
      </div>
      <div class="charactor-name">
        ナンナ・リモノフ
      </div>
    </li>
    <li>
      <div class="charactor-icon">
        <img src="assets/images/chara/icon_5.png" alt="凛" width="220">
      </div>
      <div class="charactor-name">
        凛
      </div>
    </li>
  </ul>
</section>

section と タイトル部分は、ABOUTの部分と同じデザインなので、同じクラス名を指定してます。

では、CSS部分です。

/* キャラクター */
.charactor-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.charactor-list > li {
  flex: 0 1 30%;
  text-align: center;
  margin-top: 30px;
}

.charactor-list .charactor-name {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 3px 3px 1px #f487f5,
               -3px 3px 1px #f487f5,
               3px -3px 1px #f487f5,
               -3px -3px 1px #f487f5,
               0 3px 1px #f487f5,
               0 -3px 1px #f487f5,
               3px 0 1px #f487f5,
               -3px 0 1px #f487f5;
}

display: flex

このブロックでは、これが最重要項目ですかね^^

フレックスボックスと呼ばれる表示の仕方です。

要素は横並びにしたいときによく使いますが、名前の通り、かなり柔軟に(フレキシブルに)レイアウトしてくれます。
今までは、IE10以下だとちゃんと表示してくれなかったりしたので、使うには早い感じがしましたが、IEが10のサポートをもうすぐ切ることになったので、これからは、IE11以上のブラウザをサポートすればよくなるサイトが多くなると思われます。
そうすると、このフレックスボックスが主流になるのではないでしょうか。(グリッドレイアウトも騒がれてますが^^;)

フレックスボックスの説明しようとすると、日が暮れてしまうので、詳しく知りたい方は、下記のサイトを読んでください(´-`).。oO(

※かなり細かくわかりやすく説明されています。

Webクリエイターボックスさんの CSS Flexbox のページ

3. FAQ部分

FAQ部分のHTMLです。

<!-- FAQ -->
<section class="section-area">
  <h2 class="section-heading">
    <p class="main-text">FAQ</p>
    <p class="sub-text">よくある質問</p>
  </h2>
  <ul class="faq-list">
    <li>
      <div class="faq-header">
        Q.アプリを使用するのに費用はかかりますか?
      </div>
      <div class="faq-body">
        A.ダウンロードは無料です。新しいキャラクターを使用するのに費用がかかる場合もあります。
      </div>
    </li>
    <li>
      <div class="faq-header">
        Q.どんな時に応援してくれるのですか?
      </div>
      <div class="faq-body">
        A.スタート時、ゴール時、あとは、1kmごとなどに応援してくれます。
      </div>
    </li>
    <li>
      <div class="faq-header">
        Q.使用するために必要なことはなんですか?
      </div>
      <div class="faq-body">
        A.位置情報の設定をオンにしてください。電波が届かない場所では使用できません。
      </div>
    </li>
  </ul>
</section>

特段、説明する部分ないですね笑

では、CSS。

/* FAQ */
.faq-list {
  margin-top: 30px;
}

.faq-list > li {
  background: #f6f6f6;
  margin-bottom: 20px;
}

.faq-list > li:last-child {
  margin-bottom: 0;
}

.faq-list > li .faq-header {
  position: relative;
  padding: 18px 18px 16px 40px;
  font-weight: bold;
}

.faq-list > li .faq-body {
  padding: 2px 18px 16px 40px;
}

.faq-list > li .faq-header:after {
  position: absolute;
  top: 50%;
  left: 15px;
  content: '';
  width: 10px;
  height: 15px;
  margin-top: -8px;
  background-image: url("../images/common/icon_arrow.png");
  background-size: 10px 15px;
  background-position: center;
  background-repeat: no-repeat;
}

CSSも特にないです。。。。。。。。

4. DOWNLOAD部分

DOWNLOAD部分のHTMLです。

<!-- ダウンロード -->
<section class="section-area">
  <h2 class="section-heading">
    <p class="main-text">DOWNLOAD</p>
    <p class="sub-text">ダウンロード</p>
  </h2>
  <div class="download-image">
    <a href="https://itunes.apple.com/jp/app/id969766653" target="_blank">
      <img src="assets/images/common/download.svg" alt="ダウンロード" width="300">
    </a>
  </div>
</section>

orz…….

CSS部分。。。。

/* ダウンロード */
.download-image {
  text-align: center;
  margin-top: 30px;
}

orz…………….

5. フッター

フッターのHTMLです。

<!-- フッター -->
<footer class="global-footer">
  <p class="copy">&copy; モコランニング</p>
</footer>

CSS…

/* フッター */
.global-footer {
  padding: 40px 20px;
  background: #222;
}

.global-footer .copy {
  color: #ddd;
  font-size: 14px;
  text-align: center;
}

って感じです。(ノ-_-)ノ~┻┻

 

全部コーディングし終わったところで、ブラウザ表示してみてください。

ちゃんと表示されましたでしょうか。

CSS基礎

あ。ちなみに、section の4ブロックを content-wrapper っていうクラスで囲ってます^^;;
ブラウザを縮めたときに、左右に余白ができる感じです。

以上で、CSS基礎の講座終了です!!!!

次回からは、いよいよ JavaScript です^^

今回のポイント

  1. 同様のデザインには、汎用的に使えるクラス(クラス名も)を使用しましょう!
  2. フレックスボックスは、今後、主流になると思いますw
  3. CSSのプロパティは膨大なので、とにかく調べて書いて調べて書いてするしかないですw

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP