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