Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
をさわってみよう
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をさわってみよう
Upcoming SlideShare
Loading in …5
×

CSSをさわってみよう

1,712 views

Published on

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

Published in: Engineering
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×