Skip to content

Instantly share code, notes, and snippets.

@hakatashi

hakatashi/sig-web-10.md

Last active October 27, 2016 05:19
Show Gist options
  • Save hakatashi/444e78a2ee51e1172f68ee7d8887f204 to your computer and use it in GitHub Desktop.
Save hakatashi/444e78a2ee51e1172f68ee7d8887f204 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sig-web-10.md

TSG 第10回Web分科会 カンペ

CSS特講。以前表面的にだけ触れたCSSについて詳しく見ていく。

CSSとは

第7回の資料より

ブラウザ上で表示する「内容」を表現するHTMLに対して、その「スタイル(見え方)」を調整するファイルはスタイルシートと呼ばれ、現在は通常CSSが用いられる。

CSSの文法

CSSの文法は非常に単純で、スタイルを適用したい要素を セレクター という記法で指定し、その後に適用したいスタイルを波括弧でくくって列挙していくというものである。例えば、

/* div要素に適用される */
div {
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

/* div要素の子要素の、idがfugaでclassがpoyoの要素に適用される */
div > #fuga.piyo {
	background-color: #c0ffee;
	text-decoration: line-through;
}

CSSプリプロセッサー

CSSはこのように文法が単純で機能が限られているので、大規模なCSSを書く場合はCSSプロプロセッサーと呼ばれる機構を通じてコンパイルをする場合が多い。最近よく使われているのは Sass, LESS, Stylus, PostCSS あたり。

以下で軽く説明する。

Sass

Railsに標準で付属するのでRailsの普及とともに広く使われるようになった。Sass文法とSCSS文法の2通りの文法が存在するが、SCSS文法を使用することが多い。

// div要素に適用される
div {
	$size: 100px;

	width: $size;
	height: $size;
	border: 1px solid red;

	// div要素の子要素の、idがfugaでclassがpoyoの要素に適用される
	& > #fuga.piyo {
	background-color: #c0ffee;
	text-decoration: line-through;
	}
}

LESS

Sassに大きな影響を受けて開発された。JavaScriptで実装されているのでNode.jsと相性がいい。

// div要素に適用される
div {
	@size: 100px;

	width: @size;
	height: @size;
	border: 1px solid red;

	// div要素の子要素の、idがfugaでclassがpoyoの要素に適用される
	& > #fuga.piyo {
	background-color: #c0ffee;
	text-decoration: line-through;
	}
}

Stylus

// div要素に適用される
div
	size = 100px

	width size
	height size
	border 1px solid red

	// div要素の子要素の、idがfugaでclassがpoyoの要素に適用される
	& > #fuga.piyo
	background-color #c0ffee
	text-decoration line-through

CSS各論

正直CSSについて話すことは以上で終わりと言ってもよいのだが、ここからは具体的なプロパティやテクニックについてつらつらと書き連ねていく。

基本

色関連

button {
	color: red;
	background-color: #C0FFEE;
	border-color: rgb(0, 255, 0);
}

大きさ・形

button {
	width: 100px;
	height: 20%;
	border-radius: 5px;

	border: none;
}

背景画像

div {
	width: 250px;
	height: 250px;
	background-image: url(http://placehold.it/100x100);
	background-repeat: repeat;
}

文字

div {
	font-size: 24px;
	font-weight: bold;
	font-style: italic;
	font-family: serif;
	line-height: 2em;
	text-align: right;

	width: 10em;
	height: 5em;
	background: pink;
}

marginとpadding

<div class="outer">
	<div class="div">
		<div class="inner">
		</div>
	</div>
</div>
.div {
	width: 100px;
	height: 100px;
	background: red;

	margin: 30px 50px 30px 50px;
	padding: 30px 50px 30px 50px;

	/* 上と同じ */
	margin-top: 30px;
	margin-right: 50px;
	margin-bottom: 30px;
	margin-left: 50px;
	padding-top: 30px;
	padding-right: 50px;
	padding-bottom: 30px;
	padding-left: 50px;
}

.outer, .inner {
	background: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
}

その他

こんな感じで書いていくとキリがないので、CSSについては必要なときにググったりして勉強したほうが良いです。CSS

その他よく使うプロパティ

  • max-width, max-height
  • white-space
  • word-break
  • word-wrap
  • border, outline
  • overflow
  • position
  • display, visibility
  • float, clear (もう今は使わなくていいかな……)
  • top, left, right, bottom
  • z-index
  • list-style

セレクタ

  • *
  • .class
  • #id
  • el el
  • el > el
  • el + el
  • el[hoge=fuga]
  • 疑似クラス
    • el:hover
    • el:active
    • el:focus
    • el:nth-child
  • 疑似要素
    • el::before, el::after

CSS3的なやつ

Transform

GPUを使って要素を高速に線形変換してくれる。

https://css-tricks.com/almanac/properties/t/transform/

Animation

指定したプロパティの値を勝手にアニメーションする。

JavaScriptでアニメーションするより遥かに速い。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Transition

プロパティの値が変わったときにスムーズに変化させる。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Flexbox

なんか要素の横並びや縦並びを上手いこと並べてくれるやつ。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSSについてもっと詳しくなる

CSSはこのように各論から入ることが多いためか、ベースとなる仕組みを理解せずに使ってしまうことが多い。

CSSについてちゃんと理解するためには、以下の概念を知っておこう。

  • カスケーディングと継承
  • ボックスモデル
    • ブロック整形文脈 (Block Formatting Context)
    • インライン整形文脈 (Inline Formatting Context)
    • スタック文脈 (Stacking Context)
  • マージンの圧縮
  • 計算値と実効値

実習

CSSだけを使って、以下のようなボタンを作ろう。

以下のHTMLに直接CSSを記述するか、別ファイルを作ってそこにCSSを記述する。

<!DOCTYPE html>
<html>
	<head>
		<title>Web分科会</title>
		<style>

			/* ここに書く */

		</style>
		<!-- もしくはindex.cssに書く -->
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<button type="button">Press Me!</button>
	</body>
</html>

ヒント

  • positionの仕組みを知っておこう。
  • この画像のボタン作成に用いた色は以下の通り。
    • オレンジ: #ff7a00
    • 暗いオレンジ: #b35d0c
    • ピンク: #ff0047
  • 暗いオレンジの部分は::before疑似要素や::after疑似要素で表すのが楽。
    • contentの指定忘れに注意
    • z-indexの罠に注意
  • フォント指定は font-family: "Arial Black", Gadget, sans-serif;

余力があったら

  • グラデーションをかけてみる

実装例

<!DOCTYPE html>
<html>
        <head>
                <style>

button::before {
        content: '';

        position: absolute;

        top: 0;
        left: 0;
        right: 0;
        bottom: -15px;

        z-index: -1;

        border-radius: 18px;

        background-color: #b35d0c;
        box-shadow: 0 4px 5px rgba(0, 0, 0, .5);

        transition: bottom .3s;
}

button {
        position: relative;

        top: 0px;
        padding: 0 1em;
        border-radius: 18px;

        border: none;
        outline: none;

        background-color: #ff7a00;
        color: white;

        font-family: "Arial Black", Gadget, sans-serif;
        font-size: 36px;
        line-height: 2em;
        text-transform: uppercase;
        cursor: pointer;

        transition: top .3s;
}

button:hover {
        top: 10px;
}

button:hover::before {
        bottom: -5px;
}

button:active {
        background-color: #ff0047;
}

                </style>
        </head>
        <body>
                <button type="button">Press Me!</button>
        </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment