読者です 読者をやめる 読者になる 読者になる

CSS勉強会「Kronos.css」

CSS勉強会

11/22に大阪 本町でCSS勉強会を開催しました。
初学者向け、女性限定勉強会なので、女性の方でも気軽に参加していただける勉強会です。

次回は12/13(火)にJavaScriptの勉強会を予定しています。
ご都合の合う方は是非お越しください。
Kronos.js(JavaScript女性限定勉強会)

以下、今回のCSS勉強会の資料です。
CSSフレームワーク「Foundation」についてまとめています。


CSSフレームワークとは

フレームワークの意味:枠組み、骨組み、骨格

フレームワークの決まりにしたがったCSSを書くと、簡単にそれなりのデザインのWebページができます。

メリットデメリット

メリット デメリット
あらかじめボタンやナビゲーションバーなどの様々な部品が用意されているので、簡単にデザインができる 簡単にできる分見栄えが同じようになる

CSSフレームワークの種類

Foundationの特徴

  • 簡単にレスポンシブデザインのWebページを作ることができます。
  • デザインはとてもシンプルです。
  • 簡単にカスタマイズができます
    →Foundationのサイトでカスタマイズしてフレームワークをダウンロードすることができます
  • 標準でSass (= CSSを効率的に記述するための記法) に対応しています。

Foundationのサイトの説明

Kitchen Sink

Foundationに用意されているボタンや、テーブル1つ1つの要素がどんなデザインなのかを確かめることができます。
カタログ感覚で使えます。

CSS

CSSのダウンロードページです。

  • Complete
    foundationフレームワークで用意されているすべてのCSSやJSファイルが欲しい場合はこちらをダウンロードします。

  • Essential
    最低限不可欠なファイルが入っています。
    フォント、グリッド、ボタンが含まれています。
    ファイルの重さはCompleteの二分の1くらいで軽いので、最低限しか必要ない場合は、不要なファイルが入らないのでこっちで十分だと思います。

  • Custom
    テーマカラーの変更や、フォントサイズの変更などをカスタマイズしたフレームワークをダウンロードすることができます。

  • Sass
    Sassに対応しています。
    フレームワークのカスタマイズもできるようです。

  • Accessibility
    ページを誰もがアクセスしやすく作るためのガイドラインが載っています。

HTML TEMPLATES

8つのレスポンシブ対応してるHTMLのテンプレートをダウンロードできます。
"See Demo"ボタンを押すと、デモページを見ることもできます。

Building Blocks

FoundationのUIコンポーネントのライブラリーを見ることができます。
例えば、"Responsive Pagination With Page Numbers"というUIコンポーネントを使いたければ、HTMLとCSSが記述されてあるので、その通り真似して書けば、ページ番号を表示することができます。

Resources

テンプレートや、icon、フォントなどをダウンロードして使うことができます。

Docs

Foundationのドキュメントが書かれています。
ボタンの記述方法など細かく書かれているので、実際にコーディングする時はDocsを読みながら作業すると良いでしょう。

本日のハンズオンメニュー

6つのStepを用意しました。

  1. Hello Worldを表示してみよう
  2. いろんなButtonを作ってみよう
  3. テーブルを作ってみよう
  4. フォームを作ってみよう
  5. ページトップにナビゲーションバーを表示してみよう
  6. 簡単なページを作ってみよう

Step1 Hello Worldを表示してみよう

1-1. Foundationのダウンロード

ダウンロードしてきたフォルダのファイル構造はこのようになっています。

css

js

  • app.js
  • vender
  • foundation.js
  • foundation.min.js
  • jquery.js
  • what-input.js

  • CDNで外部からソースを読み込む場合

<!-- 圧縮されたCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
<!-- 圧縮されたJavaScript -->
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>

※ CDNとは「Content delivery network」の略で、stylesheetやscriptがネットワーク経由で配信されています。

1-2. スタイルシートを読み込む

htmlのの中にlinkタグを記述します。

ダウンロードしてきた場合

以下のコードをsample1.htmlという名前をつけて、ダウンロードしてきたフォルダ直下に保存してください。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a href="#" class="button">button</a>
  </body>
</html>

CDNリンクを使う場合

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a href="#" class="button">button</a>
  </body>
</html>

このコードはFoundationのサイトのInstallationページにまるまる記述されているので、次回からはここをコピーすればすぐにhtmlを書き始めることができます。

Step2 いろんなButtonを表示してみよう

2-1. ボタンの定義方法

Foundation6にはデフォルトで様々な種類のbuttonが用意されています。
これらのボタンは、<タグ>に決まったclass名を指定するだけで、foundation6がいい感じのボタンに仕上げてくれます。

では早速試してみましょう。

以下のコードを記述して、sample2.htmlというファイル名で保存してください。

サンプルコード

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <button type="button" class="button">Default</button>
    <button type="button" class="success button">Save</button>
    <button type="button" class="alert button">Delete</button>
  </body>
</html>

まずはベーシックなbuttonを作ってみます。

ボタンにはaタグで書くパターンと、buttonタグで書くパターンがあります。
aタグにリンクをつけて別のページに遷移するようなボタンを作りたい場合は以下のように記述します。

<a href="#" class="button">Default</a>

class名をbuttonとすると、Foundation6のスタイルシートに定義されている.buttonのスタイルが反映されます。
.buttonはfoundation.cssで以下のように定義されています。

.button {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-transition: background-color .25s ease-out,color .25s ease-out;
    transition: background-color .25s ease-out,color .25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 0;
    padding: .85em 1em;
    margin: 0 0 1rem;
    font-size: .9rem;
    background-color: #2199e8;
    color: #fefefe;
}

このようにフレームワークCSSを使えば、自分でCSSを書かなくても綺麗なボタンをデザインすることができます。
また、buttonだけでこれだけのCSSを自分で書くとすると、大変時間がかかってしまいますが、フレームワークを使うとで短時間で見栄えの良いデザインにすることができます。

一方、現在のページで、ボタンを押して何かしらのアクションを加えたい場合はbuttonタグを使います。

<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>

class名にbuttonとsuccessをつけると、「成功」をイメージさせる緑のボタンができます。保存ボタンなどに使われます。
また、class名にbuttonとalertをつけると、「危険」をイメージさせる赤いボタンができできます。削除ボタンなどに使うことができます。
.successに定義されているCSSは以下の通りです。

.button.success {
    background-color: #3adb76;
    color: #fefefe;
}
.button.success:focus, .button.success:hover {
    background-color: #22bb5b;
    color: #fefefe;
}

2-2. サイズ変更

<a class="tiny button" href="#">tiny</a>
<a class="small button" href="#">small</a>
<a class="button" href="#">default</a>
<a class="large button" href="#">large</a>
<a class="expanded button" href="#">expanded</a>
<a class="small expanded button" href="#">small expanded</a>

ボタンの大きさは以下のように文字のサイズで変えているようです。

.button.tiny {
    font-size: .6rem;
}
.button.small {
    font-size: .75rem;
}
.button.large {
    font-size: 1.25rem;
}

2-3. 色変更

<a class="secondary button" href="#">Secondary Color</a>
<a class="success button" href="#">Success Color</a>
<a class="alert button" href="#">Alert Color</a>
<a class="warning button" href="#">Warning Color</a>
<a class="disabled button" href="#">Disabled Button</a>

Step3 テーブルを作ってみよう

3-1. テーブルの定義方法

Foundation6ではデフォルトで4種類のtableが用意されています。
例えば、classなど付けず、ストレートにtableの構成を書くだけで、Foundation6で用意されている最もベーシックなtableを作ることができます。

以下のコードを記述して、sample3.htmlという名前をつけて保存してください。

サンプルコード

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Adress</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Spider</td>
          <td>NY</td>
        </tr>
        <tr>
          <td>Iron</td>
          <td>Cali</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

3-2. テーブルのクラスの種類

Foundation6では、tableタグのclass属性に以下のような値をつけることで、綺麗なテーブルを作ることができます。

クラス名 説明
hover マウスオーバーした時に行の色が少し暗くなるホバーエフェクトがつきます。
stack スマホなどの小さい画面で見た際に、積み上げたようなテーブルになります。

Step4 Formを作ってみよう

formの構成と一緒に、Foundation6で用意されているスタイルを組み合わせて使うことで、フレキシブルなデザインのformを簡単に作ることができます。
formには、ラジオボタンチェックボックスなどありますが、今回はテキスト入力欄のみの説明になります。

4-1. シンプルなテキストの入力欄を作る

テキスト入力欄の種類には、日付や数値やemailや電話番号など、多くの種類のテキストに対応できるスタイルが用意されています。
クラス名もとてもシンプルでわかりやすいので、すぐに覚えられると思います。

例えば、inputタグのtype属性の値にtextと書くと、テキストを入力できるフォームができます。 以下のコードを記述して、sample4.htmlというファイル名で保存してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <form>
      <label>Input text
        <input type="text" placeholder="テキストを入力してください">
      </label>
    </form>
  </body>
</html>

※ placeholder属性には、ダミーテキストを値として入れることができます。

4-2. type属性の値の種類

text以外には以下のような種類があります。

値の種類 説明
date カレンダーが表示され、日付を入力できます。
datetime カレンダーが表示され、年月日を入力できます。
datetime-local カレンダーが表示され、datetimeに加えて時間まで入力できます。
email メールアドレスを入力します。
month カレンダーが表示され、年月まで入力できます。
number スピンボタンと呼ばれる上下ボタンによって数値のインクリメントとデクリメントができます。自分で入力することも可能です。
password パスワード入力欄で、入力値が●で表示されます。
search 検索ワードを入力します。
tel 電話番号を入力します。
time スピンボタンつきで、時間を入力できます。
url URLを入力します。
week XXXX年第Y週のように週を入力することができます。

4-3. 表示位置を変える

ラベルの位置

labelタグのクラス名にtext-rightかfloat-rightと書くと、ラベルが右よりに配置されます。
leftの場合も同様です。

<div class="row">
  <div class="small-3 columns">
    <label for="middle-label" class="text-right middle">Label</label>
  </div>
  <div class="small-9 columns">
    <input type="text" id="middle-label" placeholder="テキストを入力してください">
  </div>
</div>

※ クラス名にclumnsと指定すると、foundation.cssファイルの.columnsに定義してあるpadding-leftとpadding-rightが効くので左右に余白がつきます。
※ クラス名についている、"small-3"や"small-9"はFoundation6のグリッドシステムを使っています。

Step5 ページトップにナビゲーションバーを表示してみよう

5-1. ベーシックなナビゲーションバー

以下のコードを記述して、sample5.htmlというファイル名で保存してください。

サンプルコード

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text">Site Title</li>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">access</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
    </div>
  </body>
</html>

ナビゲーションバーの枠組みとなるhtml

<div class="top-bar">
  <div class="top-bar-left"></div>
  <div class="top-bar-right"></div>
</div>

top-bar-leftとtop-bar-rightには、以下のようにCSSでfloatが定義されています。

.top-bar-left {
  float: left;
}
.top-bar-right {
  float: right;
}

5-2. レスポンシブなナビゲーションバー

スマホ画面にあわせてメニューのタブが変化します。
以下のコードを追加することで、デフォルトでは画面が小さくなった時にタイトルバーが表示されて、バーに表示されていたメニューは隠れます。
data-responsive-toggleには切り替えたいメニューのIDを指定します。

<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
  <button class="menu-icon dark" type="button" data-toggle></button>
</span>

サンプル

<div class="top-bar">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <button class="menu-icon dark" type="button" data-toggle></button>
    </span>
    <strong>Site Title</strong>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
</div>

Step6 簡単なページを作成してみよう

ここまでのフレームワークのコンテンツを使って、自由にページを作成してみてください。
私が作ったサンプルを貼っておきますので、困った場合はこのコードをカスタマイズしてお使いください。

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kronos.css</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
  <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
</head>
<body>
  <!-- ナビゲーションバー -->
  <div class="top-bar">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">The Heroes</li>
      </ul>
    </div>
  </div>

  <!-- タイトル -->
  <div class="row">
    <div class="large-12 columns">
      <div class="text-center" style="margin-top: 30px">
        <h3>The Heroes</h3>
      </div>
      <p class="text-justify">
        The Heroes were an Ameriacan rock band, formed in LA in 1960. With members Spider, Iron and Bat, they became widely regarded as the foremost and most influential act of the rock era. Rooted in skiffle, beat, and 1950s rock and roll, the Heroes later experimented with several musical styles, ranging from pop ballads and Indian music to psychedelia and hard rock.
      </p>
      <hr>
    </div>
  </div>

  <!-- テーブル -->
  <div class="row">
    <div class="large-12 columns">
      <table class="stack hover columns text-center" style="margin-top: 1.25rem">
        <thead>
          <tr>
            <th class="text-center">Members</th>
            <th class="text-center">Part</th>
            <th class="text-center">And More</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Spider</td>
            <td>Guitar & Vo</td>
            <td>
              <a href="#" class="button">Detalis</a>
            </td>
          </tr>
          <tr>
            <td>Iron</td>
            <td>Base</td>
            <td>
              <a href="#" class="button">Detalis</a>
            </td>
          </tr>
          <tr>
            <td>Bat</td>
            <td>Drums</td>
            <td>
              <a href="#" class="button">Detalis</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>