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に用意されているボタンや、テーブル１つ１つの要素がどんなデザインなのかを確かめることができます。
カタログ感覚で使えます。
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を用意しました。
- Hello Worldを表示してみよう
- いろんなButtonを作ってみよう
- テーブルを作ってみよう
- フォームを作ってみよう
- ページトップにナビゲーションバーを表示してみよう
- 簡単なページを作ってみよう
Step1 Hello Worldを表示してみよう
1-1. Foundationのダウンロード
- ファイルをダウンロードする場合
Foundationダウンロードページからファイルをダウンロードできます。
ダウンロードしてきたフォルダのファイル構造はこのようになっています。
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に加えて時間まで入力できます。 |
| メールアドレスを入力します。 | |
| 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>
