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


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

制作ユニット Arcted


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

無料写真素材サイト

PAKUTASO（ぱくたそ）



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

はじめに

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

3つ紹介します



• VirtualDocumentRoot

• CSS Sprite in Mixin

• Displayタグ

VirtualDocumentRoot ローカル環境の整理



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

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

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

簡略化したかった



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

/realestate/ /illust/



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

localhost.rearestate.jp localhost.illust.com



③ 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



④ confファイルを作成する

realestate.conf illust.conf




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



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


サイトにあわせて変更



⑤ Apacheをリスタート

• /sbin/service restart

• service restart

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

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


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

③ hostsファイルを設定する


⑤ Apache再起動





⑤ Apache再起動

多い！

VirtualDocumentRootを使う

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

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





⑤ Apache再起動

これだけ

VirtualDocumentRootの設定



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

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

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






VirtualDocumentRootの設定






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

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






ワイルドカードに



VirtualDocumentRootのまとめ

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

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

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

CSS Sprite in Mixin



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

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

• リクエスト数の削減

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



作り方はいろいろ

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

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

Sass + Compass



画像切り出しコンパイル



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でフォルダ以下読み込み





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





画像置換を placeholderとして設定




@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を読み込む





画像の座標値を指定





画像の横幅と縦幅を指定



完成




指定画像を表示

<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




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

SCSS

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




#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の座標値が出力される




#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



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

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

SCSS

リスト定義





SCSS

リスト情報取り出す





SCSS

リスト内の変数のa要素





SCSS

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




#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




$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



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/

http://stackstock.net/archives/2008/

http://stackstock.net/archives/2008/



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に記述



Compass Sprite Tips

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

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



CSS Sprite in Mixin

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

• Sprite画像の修正が容易

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

Displayタグ

Donec ornare massa ac orci sodales sodales.



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

垂直中央にしたい




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

垂直中央にしたい

floatでは調整が難しい

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



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

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

• 幅の均等処理も可能



#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



メニューを横並びに

#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



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




幅固定







幅可変




HTML

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




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; }




.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



display:table;タグのまとめ

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

• PCはIE8から

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

ありがとうございました

web制作のアレコレ

Documents