Web制作のアレコレ

知っていると便利かもしれない

Web制作のアレコレ
Creators MeetUp vol.01
2013/02/23
Yuu / @regret_raym

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

自己紹介

Yuu / Yuji Tsukaguchi
regret_raym
regretraym

• Webデザイナー
• 制作ユニットArctedで活動
• ぱくたそ（PAKUTASO）のエンジニア


http://creator-life.net/

Creator Life

http://arcted.jp/

制作ユニット Arcted


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ファイルの設定をする
XAMPPとかなら

127.0.0.1 localhost
127.0.0.1 localhost.realestate.jp
127.0.0.1 localhost.illust.com
仮想環境なら

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再起動

②ドメインをそれぞれ設定する
多い！
③ hostsファイルを設定する
⑤ Apache再起動

VirtualDocumentRoot は、
ホスト名などの文字列から、
ドキュメントルートを
自動でマッピングしてくれる


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

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

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


VirtualDocumentRootの設定
<VirtualHost *:80>
ServerName *
～～～～～～～
</Directory>
</VirtualHost>



ホストネームやサブドメインの値をマッピング
<VirtualHost *:80>
ServerName *
～～～～～～～ %0 … hoge.test.localhost
</Directory> %1 … hoge
</VirtualHost> %2 … test
%3 … localhost



ワイルドカードに
<VirtualHost *:80>
ServerName *
～～～～～～～
</Directory>
</VirtualHost>



VirtualDocumentRootのまとめ

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

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

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



サイト高速化の手法の一つ
• 複数の画像を1枚にま
とめる

• リクエスト数の削減

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



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

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



画像切り出しコンパイル



CompassでSprite生成
$sprites: sprite-map("sprite/*.png");
$spriteImg:sprite-url($sprites);
%sprite{
display:block; sprite-mapで
overflow: hidden; フォルダ以下読み込み
height:0;
background-image: $spriteImg;
background-repeat:no-repeat;
}


%sprite{
display:block; コンパイルの実行時間
overflow: hidden; 短縮のために変数に。
height:0;
}


%sprite{
display:block; 画像置換を
overflow: hidden; placeholderとして設定
height:0;
}



@mixin ir ( $filename ) { Mixin化して
@extend %sprite; Spriteを読み込む
background-position: sprite-position($sprite,
$filename);
width:image-width("sprite/#{$filename}.png");
padding-top: image-height("sprite/#{$filename}.png");
}




@mixin ir ( $filename ) { 画像の座標値を指定
@extend %sprite;
$filename);
}




画像の横幅と
@mixin ir ( $filename ) {
縦幅を指定
@extend %sprite;
$filename);
}



完成

@mixin ir ( $filename ) {
@extend %sprite;
$filename);
}



指定画像を表示
html

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



SCSS

#gNav { 画像ファイル名
. hoge{ hogehogeを読み込む
a{
@include ir( hogehoge );
}
}
}



CSS
#gNav .hoge a{
display: block;
overflow: hidden;
height: 0;
background-image: hogehogeの
url(‘sprite.png'); 座標値が出力される
background-repeat: no-repeat;
}
#gNav .hoge a{
background-position:0 -200;
}



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



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

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



SCSS

#gNav{ リスト情報
$gNavList : hoge piyo fuga;
取り出す
.#{$list} a{
}
}
}



SCSS

#gNav{
$gNavList : hoge piyo fuga; リスト内の変数
@each $list in $gNavList { のa要素
.#{$list} a{
}
}
}



SCSS

#gNav{ リスト内の変数
$gNavList : hoge piyo fuga; と同名ファイル
.#{$list} a{
を呼び出す
}
}
}



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



HTML CSS
#gNav .hoge a, #gNav .piyo a,
#gNav .fuga a{
$list:hoge piyo fuga; display: block;
@each $list in $gnavList{ overflow: hidden;
.#{$list} a{ height: 0;
@include ir(gNav_#{$list},true); background-image:
} url(‘sprite.png');
} background-repeat: no-repeat;
#gNav { }
@include ir( hogehoge ); #gNav .hoge a, #gNav .piyo a,
} #gNav .fuga a{
background-position:0 -200;
}



Compass Sprite Tips
sprite-sa408f7de4a.pngの英数字を消したい
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 CompassでCSSスプライトを生成した際
のファイル名を変更する方法
end http://stackstock.net/archives/2008/
end


Compass Sprite Tips
sprite-sa408f7de4a.pngの英数字を消したい
on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
config.rbに記述
File.open(filename, 'w+') do |f|
f << css.gsub(%r{-s[a-z0-9]{10}¥.png},
'.png')
end
end
end


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

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



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

• Sprite画像の修正が容易

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


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

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
floatでは調整が難しい
sodales sodales.

Donec ornare
massa ac orci
sodales sodales.
垂直中央にしたい

Donec ornare
massa ac orci
sodales sodales.

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


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

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

• 幅の均等処理も可能



メニューを横並びに
HTML CSS

<nav id=“gNav”>
<ul> #gNav ul{
<li>History</li> display:table;
<li>Most recent</li> width:100%;
<li>Most viewed</li> }
<li>Search</li> #gNav li{
<li>More</li> display:table-cell;
</ul> }
</div>



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

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.



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


HTML CSS
.list ul li{
<div class=“list”>
display:table;
<ul>
width:100%;
<li>
}
<div class=“img”><img
.list ul li .img{
src=“hoge.jpg”></div>
width:100px;
<div
}
class=“txt”>hogehoge</div
.list ul li .img,
>
.list ul li .txt{
</li>
display:table-cell;
</ul>
vertical-align:middle;
</div>
}


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

• PCはIE8から

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


ありがとうございました

Web制作のアレコレ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Web制作のアレコレ

Similar to Web制作のアレコレ (20)

More from regret raym

More from regret raym (13)

Web制作のアレコレ