HTML/CSS 勉強会 2015Styling コース (0)

こんにちは CSS.

始める前に、、、

• マシンをお持ちになった方

–マシン起動してください

–ブラウザ立ち上げてください• https://gitter.im/SatoshiMukainakano/exposedTrial

今回は、、、

• こんにちは CSS

• 通訳の紹介

• 通訳と親しもう

• 小噺

–単位「ピクセル」

–高解像度対応用の画像

• And more

こんにちは CSS

ビジュアルを整える、いろいろなことを設定できます

• レイアウト– 位置、余白、サイズ、左右寄せ・センタリング

• 装飾– 色、フォント設定、画像、グラデーション

• 動き– マウスオーバー、アニメーション、transform

、、、って言われても。

（´・ω・`） ……… 。

こんにちは CSS

スタイルを設定するとき、こんな指定をしてください

• 対象– 設定したいもの。

• 設定したい項目– 項目の名前

• 設定したい内容– パラメータ

、、、って言われても。

（´・ω・`） ………………… 。

こんなカンジの書式です

例）「pタグの中ではテキストの色を #333 にする」

p{

color:#333;

}

結局、コードじゃん。

（´・ω・`）「結局、コードかかないと表現できないの？」

あ。

ご安心ください！

ご安心ください

楽譜・音符が書けなくても、「音楽」「楽曲」「音」を表現できる

、、、ように

ご安心ください

CSSコードそのものが書けなくても、「スタイル」を表現できる。

でも、どうやれば？

通訳の方にご登場いただきましょう。

通訳のご紹介

今回は

Mr. Mike Plate 作： CSS3 PlayGroundhttp://css3.mikeplate.com/

親しみましょう

• Radius and Box-Shadow

• Text-Shadow

• Transform

• Columns

• Gradient-Background

• Border and Outline

• … and so on

今回は、、、

• こんにちは CSS .

• 通訳の紹介 .

• 通訳と親しもう .

• 小噺

–単位「ピクセル」

–高解像度対応用の画像 .

• And more

「ピクセル」

「１px ＝ 1粒」？

少し詳しく

atmarkIT「WebページをRetina対応させるテクニック」http://www.atmarkit.co.jp/ait/articles/1308/29/news004.html

「高解像度対応」の画像

「面積が広くなる」→「ファイル重くなる」？

少し詳しく

のんたんブログ「Retinaディスプレイ用の画像最適化」http://andus.heteml.jp/tpl/performance/retina.php

今回は、、、

• こんにちは CSS .

• 通訳の紹介 .

• 通訳と親しもう .

• 小噺

–単位「ピクセル」

–高解像度対応用の画像 .

• And more .

And more . . .

ご質問、素朴な疑問、なんでも。

今日はここまで

お疲れさまでした。散会いたします。

質問・相談などございましたら、どうぞ。

ここにタイトル

ここに本文