HTML and CSS Class-s0

HTML/CSS 勉強会 2015
Styling コース (0)
こんにちは CSS.

始める前に、、、
• マシンをお持ちになった方
– マシン起動してください
– ブラウザ立ち上げてください
• https://gitter.im/SatoshiMukainakano/exposedTrial

今回は、、、
• こんにちは CSS
• 通訳の紹介
• 通訳と親しもう
• 小噺
– 単位「ピクセル」
– 高解像度対応用の画像
• And more

こんにちは CSS
ビジュアルを整える、いろいろなことを設定できます
• レイアウト
– 位置、余白、サイズ、左右寄せ・センタリング
• 装飾
– 色、フォント設定、画像、グラデーション
• 動き
– マウスオーバー、アニメーション、transform

、、、って言われても。
（´・ω・`） ……… 。

こんにちは CSS
スタイルを設定するとき、こんな指定をしてください
• 対象
– 設定したいもの。
• 設定したい項目
– 項目の名前
• 設定したい内容
– パラメータ

、、、って言われても。
（´・ω・`） ………………… 。

こんなカンジの書式です
例）
「pタグの中ではテキストの色を #333 にする」
p{
color:#333;
}

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

あ。
ご安心ください！

ご安心ください
楽譜・音符が書けなくても、
「音楽」「楽曲」「音」を表現できる
、、、ように

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

でも、どうやれば？
通訳の方にご登場いただきましょう。

今回は
Mr. Mike Plate 作： CSS3 PlayGround
http://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 . . .
ご質問、素朴な疑問、なんでも。

今日はここまで
お疲れさまでした。散会いたします。
質問・相談などございましたら、どうぞ。

ここにタイトル
ここに本文

Recommandé