web制作のアレコレ

Creators MeetUp vol.01 2013/02/23

Yuu / @regret_raym

Web制作のアレコレ 知っていると便利かもしれない

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

自己紹介

• Webデザイナー

• 制作ユニットArctedで活動

• ぱくたそ（PAKUTASO）のエンジニア

Yuu / Yuji Tsukaguchi

regret_raym

regretraym

http://creator-life.net/

Creator Life

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ http://arcted.jp/

制作ユニット Arcted

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ http://pakutaso.com/

無料写真素材サイト

PAKUTASO（ぱくたそ）

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

https://www.facebook.com/gcss.reference

はじめに

個人的に これは便利だなっていうのを

3つ紹介します

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

• VirtualDocumentRoot

• CSS Sprite in Mixin

• Displayタグ

VirtualDocumentRoot ローカル環境の整理

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

• インストール型パッケージ

• 仮想マシンによるサーバ構築

ローカルサーバで サイトを作るときの手順を

簡略化したかった

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

① サイトのディレクトリを作る

/realestate/ /illust/

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

② ドメインをそれぞれ設定する

localhost.rearestate.jp localhost.illust.com

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

③ hostsファイルの設定をする

127.0.0.1 localhost

127.0.0.1 localhost.realestate.jp

127.0.0.1 localhost.illust.com

仮想環境なら

XAMPPとかなら

192.168.XX.XX localhost.realestate.jp

192.168.XX.XX localhost.illust.com

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

④ confファイルを作成する

realestate.conf illust.conf

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

④ confファイルを作成する

#realestate.conf <VirtualHost *:80> DocumentRoot /var/www/html/realestate ServerName localhost.realestate.jp <Directory "/var/www/html/realestate"> #ディレクティブ設定があれば。 </Directory> </VirtualHost>

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

#realestate.conf <VirtualHost *:80> DocumentRoot /var/www/html/realestate ServerName localhost.realestate.jp <Directory "/var/www/html/realestate"> #ディレクティブ設定があれば。 </Directory> </VirtualHost>

④ confファイルを作成する

サイトにあわせて変更

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

⑤ Apacheをリスタート

• /sbin/service restart

• service restart

• /etc/init.d/httpd restart などなど

XAMPP・MAMPならアプリケーション 再起動とか

① サイトのディレクトリを作る

②ドメインをそれぞれ設定する

③ hostsファイルを設定する

④ confファイルを作成する

⑤ Apache再起動

① サイトのディレクトリを作る

②ドメインをそれぞれ設定する

③ hostsファイルを設定する

④ confファイルを作成する

⑤ Apache再起動

多い！

VirtualDocumentRootを使う

VirtualDocumentRoot は、 ホスト名などの文字列から、

ドキュメントルートを 自動でマッピングしてくれる

① サイトのディレクトリを作る

②ドメインをそれぞれ設定する

③ hostsファイルを設定する

④ confファイルを作成する

⑤ Apache再起動

① サイトのディレクトリを作る

②ドメインをそれぞれ設定する

③ hostsファイルを設定する

④ confファイルを作成する

⑤ Apache再起動

これだけ

VirtualDocumentRootの設定

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

http.conf以下*に下記を記述

<VirtualHost *:80> ServerName * VirtualDocumentRoot /var/www/html/%0 <Directory "/var/www/html/*"> ～～～～～～～ </Directory> </VirtualHost>

*もしくはconf.d以下にvhost.confとか作成

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

http.conf以下*に下記を記述

*もしくはconf.d以下にvhost.confとか作成

<VirtualHost *:80> ServerName * VirtualDocumentRoot /var/www/html/%0 <Directory "/var/www/html/*"> ～～～～～～～ </Directory> </VirtualHost>

VirtualDocumentRootの設定

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

http.conf以下*に下記を記述

*もしくはconf.d以下にvhost.confとか作成

<VirtualHost *:80> ServerName * VirtualDocumentRoot /var/www/html/%0 <Directory "/var/www/html/*"> ～～～～～～～ </Directory> </VirtualHost>

ホストネームやサブドメインの値をマッピング

%0 … hoge.test.localhost %1 … hoge %2 … test %3 … localhost

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

http.conf以下*に下記を記述

*もしくはconf.d以下にvhost.confとか作成

<VirtualHost *:80> ServerName * VirtualDocumentRoot /var/www/html/%0 <Directory "/var/www/html/*"> ～～～～～～～ </Directory> </VirtualHost>

ワイルドカードに

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

http.conf以下*に下記を記述

*もしくはconf.d以下にvhost.confとか作成

<VirtualHost *:80> ServerName * VirtualDocumentRoot /var/www/html/%0 <Directory "/var/www/html/*"> ～～～～～～～ </Directory> </VirtualHost>

DEMO

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

VirtualDocumentRootのまとめ

• 初めに httpd.confかvhost.conf（任意名）に VirtualDocumentRootを記述する

• 指定したドキュメントルート以下に、サイトごとのフォルダを作る

• Hostsファイルにサイトの設定をする

CSS Sprite in Mixin

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

サイト高速化の手法の一つ

• 複数の画像を1枚にまとめる

• リクエスト数の削減

• background-positionで表示位置を指定

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

作り方はいろいろ

• PhotoshopやFireworksなどのグラフィックツールを用いて制作

• Sprite生成用アプリケーションを使用（オンライン・オフライン版）

Sass + Compass

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

画像切り出し コンパイル

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

CompassでSprite生成

$sprites: sprite-map("sprite/*.png"); $spriteImg:sprite-url($sprites); %sprite{ display:block; overflow: hidden; height:0; background-image: $spriteImg; background-repeat:no-repeat; }

sprite-mapで フォルダ以下読み込み

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

CompassでSprite生成

$sprites: sprite-map("sprite/*.png"); $spriteImg:sprite-url($sprites); %sprite{ display:block; overflow: hidden; height:0; background-image: $spriteImg; background-repeat:no-repeat; }

コンパイルの実行時間短縮のために変数に。

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

CompassでSprite生成

$sprites: sprite-map("sprite/*.png"); $spriteImg:sprite-url($sprites); %sprite{ display:block; overflow: hidden; height:0; background-image: $spriteImg; background-repeat:no-repeat; }

画像置換を placeholderとして設定

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

CompassでSprite生成

@mixin ir ( $filename ) { @extend %sprite; background-position: sprite-position($sprite, $filename); width:image-width("sprite/#{$filename}.png"); padding-top: image-height("sprite/#{$filename}.png"); }

Mixin化して Spriteを読み込む

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

CompassでSprite生成

@mixin ir ( $filename ) { @extend %sprite; background-position: sprite-position($sprite, $filename); width:image-width("sprite/#{$filename}.png"); padding-top: image-height("sprite/#{$filename}.png"); }

画像の座標値を指定

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

CompassでSprite生成

@mixin ir ( $filename ) { @extend %sprite; background-position: sprite-position($sprite, $filename); width:image-width("sprite/#{$filename}.png"); padding-top: image-height("sprite/#{$filename}.png"); }

画像の横幅と 縦幅を指定

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

完成

@mixin ir ( $filename ) { @extend %sprite; background-position: sprite-position($sprite, $filename); width:image-width("sprite/#{$filename}.png"); padding-top: image-height("sprite/#{$filename}.png"); }

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

指定画像を表示

<nav id=“gNav”> <ul> <li class=“hoge”><a href=“#”>hoge</a></li> <li class=“piyo”><a href=“#”>piyo</a></li> <li class=“fuga”><a href=“#”>fuga</a></li> </ul> </nav>

html

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

指定画像を表示

#gNav { . hoge{ a{ @include ir( hogehoge ); } } }

SCSS

画像ファイル名 hogehogeを読み込む

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

指定画像を表示

#gNav .hoge a{ display: block; overflow: hidden; height: 0; background-image: url(‘sprite.png'); background-repeat: no-repeat; } #gNav .hoge a{ background-position:0 -200; }

CSS

hogehogeの 座標値が出力される

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

指定画像を表示

#gNav { . hoge{ a{ @include ir( hogehoge ); } } }

SCSS

#gNav .hoge a{ display: block; overflow: hidden; height: 0; background-image: url(‘sprite.png'); background-repeat: no-repeat; } #gNav .hoge a{ background-position:0 -200; }

CSS

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

リスト形式で指定画像を表示

#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }

SCSS

リスト定義

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

リスト形式で指定画像を表示

#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }

SCSS

リスト情報 取り出す

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

リスト形式で指定画像を表示

#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }

SCSS

リスト内の変数のa要素

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

リスト形式で指定画像を表示

#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }

SCSS

リスト内の変数と同名ファイルを呼び出す

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

リスト形式で指定画像を表示

#gNav .hoge a, #gNav .piyo a, #gNav .fuga a { display: block; overflow: hidden; height: 0; background-image: url(‘sprite.png'); background-repeat: no-repeat; } #gNav .hoge a { background-position:0 -200; } #gNav .hoge a { background-position:0 -200; } #gNav .hoge a { background-position:0 -200; }

CSS

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

リスト形式で指定画像を表示

$list:hoge piyo fuga; @each $list in $gnavList{ .#{$list} a{ @include ir(gNav_#{$list},true); } } #gNav { @include ir( hogehoge ); }

HTML #gNav .hoge a, #gNav .piyo a, #gNav .fuga a{ display: block; overflow: hidden; height: 0; background-image: url(‘sprite.png'); background-repeat: no-repeat; } #gNav .hoge a, #gNav .piyo a, #gNav .fuga a{ background-position:0 -200; }

CSS

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

Compass Sprite Tips

on_stylesheet_saved do |filename|

if File.exists?(filename)

css = File.read filename

File.open(filename, 'w+') do |f|

f << css.gsub(%r{-s[a-z0-9]{10}¥.png}, '.png')

end

end

end

sprite-sa408f7de4a.pngの英数字を消したい

CompassでCSSスプライトを生成した際のファイル名を変更する方法 http://stackstock.net/archives/2008/

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

Compass Sprite Tips

on_stylesheet_saved do |filename|

if File.exists?(filename)

css = File.read filename

File.open(filename, 'w+') do |f|

f << css.gsub(%r{-s[a-z0-9]{10}¥.png}, '.png')

end

end

end

sprite-sa408f7de4a.pngの英数字を消したい

config.rbに記述

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

Compass Sprite Tips

$sprite: sprite-map("sprite/*.png", $spacing: 20px);

生成した画像がぴったりくっつきすぎ

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

CSS Sprite in Mixin

• Compassを使うと簡単にSpriteが生成できる

• Sprite画像の修正が容易

• @extendを使うことで、コンパクトに

Displayタグ

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

横幅のサイズや 数が不規則

垂直中央にしたい

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

横幅のサイズや 数が不規則

垂直中央にしたい

floatでは調整が難しい

displayによるレイアウト display:table;とdisplay:table-cell;

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

• CSSでテーブル組が実現できる

• vertical-align指定による行揃えが可能

• 幅の均等処理も可能

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

#gNav ul{ display:table; width:100%; } #gNav li{ display:table-cell; }

メニューを横並びに

<nav id=“gNav”> <ul> <li>History</li> <li>Most recent</li> <li>Most viewed</li> <li>Search</li> <li>More</li> </ul> </div>

HTML CSS

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

メニューを横並びに

#gNav ul{ display:table; width:100%; } #gNav li{ display:table-cell; }

<nav id=“gNav”> <ul> <li>History</li> <li>Most recent</li> <li>Most viewed</li> <li>Search</li> <li>More</li> </ul> </div>

HTML CSS

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

メニューを横並びに

#gNav ul{ display:table; width:100%; } #gNav li{ display:table-cell; }

<nav id=“gNav”> <ul> <li>History</li> <li>Most recent</li> <li>Most viewed</li> <li>Search</li> <li>More</li> </ul> </div>

HTML CSS

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

サムネイルとテキストの中央揃え

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

幅固定

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

サムネイルとテキストの中央揃え

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

Donec ornare massa ac orci sodales sodales.

幅可変

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

サムネイルとテキストの中央揃え

HTML

<div class=“list”> <ul> <li> <div class=“img”><img src=“hoge.jpg”></div> <div class=“txt”>hogehoge</div> </li> </ul> </div>

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

サムネイルとテキストの中央揃え

CSS .list ul li{ display:table; width:100%; } .list ul li .img{ width:100px; } .list ul li .img, .list ul li .txt{ display:table-cell; vertical-align:middle; }

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

サムネイルとテキストの中央揃え

.list ul li{ display:table; width:100%; } .list ul li .img{ width:100px; } .list ul li .img, .list ul li .txt{ display:table-cell; vertical-align:middle; }

<div class=“list”> <ul> <li> <div class=“img”><img src=“hoge.jpg”></div> <div class=“txt”>hogehoge</div> </li> </ul> </div>

HTML CSS

Creators MeetUp vol.01

知っていると便利かもしれない Web制作のアレコレ

display:table;タグのまとめ

• display:table;を使うことで、floatで困っていた問題が解決する

• PCはIE8から

• 疑似要素をうまく使うことで、多彩なレイアウトが実現できる

ありがとうございました