cssをさわってみよう
TRANSCRIPT
をさわってみようCode for KOSEN 勉強会 #4
CSS
2015.11.08 @yamasy1549
主に SCSS
HTML編からきました
をさわってみようCode for KOSEN 勉強会 #4
HTML
2015.11.08 @yamasy1549
CSS ってどうやって書くの
超ざっくりと。
SCSS を使ってみよう
CSSがﾁｮｯﾄ書きやすくなるかも
うさぎ
うさぎ div { color: pink; }
<div>うさぎ </div>
うさぎ
うさぎ
.animal {
border: 1px solid pink;
}
<div class="animal">うさぎ </div>
div {
background-color: pink;
color: white;
}
うさぎとり.animals { color: pink; }
#bird { color: green; }
うさぎとり.animals { color: pink; }
.animals .bird { color: green; }
<div class="animals">
うさぎ
<span id="bird">とり </span>
</div>
CSS は直感的に書きにくいところもあるので
今回はより機能が豊富で書きやすい（と思われる）
SCSS という言語を使います。
実際には、SCSS で書いたものをCSS に変換します。
1. 変数
（CSSでも変数は使えるけど…）
2. 入れ子
div の中の span の…と、感覚的に書ける
3. Mixin
関数のように、定義したスタイルを使いまわせる
「Sass」という書き方から派生
「Sassy CSS」だから SCSS。CSS と SaSS の中間
コンパイルが要る
そのままでは使えないので、SCSS から CSS に変換
変換は Ruby だけど…
わざわざRuby 入れてもらってたら日が暮れる
https://c9.io にアクセス
登録登録～
新しくWorkspace をつくる
「Create a new workspace」
Workspace name: my-portfolio（てきとう）
Clone from ... : https://github.com/yamasy1549/sample-portfolio.git
「Run」からの「Automatically Build Supported Files」にチェック（必須）
Cloud9 は、プログラミング環境を
ネット上で整えてくれるすごいやつだよ！
エディタの設定・色・フォントとかは趣味で
Vim / Emacs / Sublime が選択できるので
宗教戦争起きなくて安心だね！！
それっぽい画面（中央にうさみみ）が出てきたらOK
コードをいじると自動でその画面にも変更が反映されるのかな？便利！
「Preview」から「Live Preview File」
右側に画面が現れるので、
いかにも新しいタブで開きそうなボタンを押す
（「Browser」の右の四角いやつ）
画面の幅を変えてみよう
ブラウザの横幅を狭めてもｲｲｶﾝｼﾞになっている
Chrome や Firefox、Safari の便利機能
右クリック → 要素の検証
HTMLと CSS がブラウザからのぞき見できる
index.html をいじってみよう
うさみみを自分のアイコンに差し替えてみよう
styles/ の中をのぞいてみよう
SCSS ファイルを変更すると、よしなにCSS を吐いてくれます
all.scss - 他の SCSS を読み込み
_variables.scss - 変数を定義
_mixins.scss - mixin を定義
_style.scss - 全体のスタイル
※ スタイルシートの構成・分け方は一例です。
index.html の読み合わせ的な
1 HTML5で書きます宣言
2 日本語で書きます宣言
3 <head> - この HTMLページに関する、機械向けの情報を書くところ
4 文字コードは utf-8 で
5 表示領域を画面幅に合わせる
7 （違うファイルになっている）CSS を読み込む
8 <title> - 検索で出てきたり、タブに表示されたりするタイトル
10 <body> - 実際にページとして表示される、人間向けの情報を書くところ
12 <header> - ページのイントロダクション。<head> じゃないよ
13 <img src=""> - 画像を埋め込む。src 属性で画像の場所を指定
alt 属性で、画像が表示できない時の代替テキストを指定
14 <h1> - 見出し。ランクの高い順に 1から 6まである
15 <nav> - ナビゲーション（サイト内へのリンク集のようなもの）
16 <ul> - 順序のないリスト。順序のあるリスト <ol> もある
17 <li> - <ul> や <ol> それぞれの項目
18 <a href=""> - ハイパーリンクを指定。href 属性でリンク先のURL を指定
33 <div> - ひとかたまりの範囲。特別な意味はない！
CSS でスタイルを当てるときに使われることが多い。
34 <main> - メインコンテンツであることを表す
35 <section> - セクション（意味や機能のひとまとまり）。
意味的なまとまりのため、section には見出しをつけられるはず
37 <p> - ひとつの段落
38 <br> - 改行。ただし、余白をとったりするのに使うのはふさわしくない
48 <strong> - 強い重要性
※ あくまで、書き方は一例です。
_style.scss の読み合わせ的な
1 ＊ - 全称セレクタ。すべての要素に適用される
2 margin - 外側の余白のこと。上下左右それぞれ別にも指定できる
3 padding - 内側の余白のこと。上下左右それぞれ別にも指定できる
22 class をセレクタにするときは「.」、id なら「#」で書ける
23 @include - SCSS のmixin を読み込む
24 display - 要素の表示形式（ブロックレベルなど）を指定
26 border-radius - 四隅の角丸ぐあいを指定
27 width - 要素の幅を指定
73 &:hover - これが指定されたセレクタに、マウスが乗ったときのスタイルを当てる
ここでは <a>（63行目）にマウスオーバーしたときの挙動を指定
_mixins.scss の解説
これを読もう
https://speakerdeck.com/ken_c_lo/zurui-design
それからここで試してみよう
http://yamasy.info/zurui-scss-test
@denari01 先輩に教えてもらった
「そっすよ」デザインのコツを生かして
自分の紹介サイト / ポートフォリオサイトを
作ってみよう！
http://www.slideshare.net/denari01/ss-46116053