Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
をさわってみよう
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; }
<...
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 / ...
それっぽい画面(中央にうさみみ)が出てきたら OK
コードをいじると自動でその画面にも変更が反映されるのかな?便利!
「Preview」から「Live Preview File」
右側に画面が現れるので、
いかにも新しいタブで開きそうなボタンを...
画面の幅を変えてみよう
ブラウザの横幅を狭めてもイイカンジになっている
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...
10 <body> - 実際にページとして表示される、人間向けの情報を書くところ
12 <header> - ページのイントロダクション。<head> じゃないよ
13 <img src=""> - 画像を埋め込む。src 属性で画像の場所を指...
33 <div> - ひとかたまりの範囲。特別な意味はない!
CSS でスタイルを当てるときに使われることが多い。
34 <main> - メインコンテンツであることを表す
35 <section> - セクション(意味や機能のひとまとまり)。...
48 <strong> - 強い重要性
※ あくまで、書き方は一例です。
_style.scss の読み合わせ的な
1 * - 全称セレクタ。すべての要素に適用される
2 margin - 外側の余白のこと。上下左右それぞれ別にも指定できる
3 padding - 内側の余白のこと。上下左右それぞれ別にも指定できる
22 class をセレクタにするときは「.」、id なら「#」で書ける
23 @include - SCSS の mixin を読み込む
24 display - 要素の表示形式(ブロックレベルなど)を指定
26 border-radius ...
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
CSSをさわってみよう
CSSをさわってみよう
CSSをさわってみよう
Prochain SlideShare
Chargement dans…5
×

CSSをさわってみよう

1 645 vues

Publié le

Code for KOSEN 勉強会 #4 〜ゆるふわWebデザイン講座 + Gitを使おう〜 にて

Publié dans : Ingénierie
  • Soyez le premier à commenter

CSSをさわってみよう

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

×