Download - Web制作のアレコレ
![Page 1: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/1.jpg)
Creators MeetUp vol.01 2013/02/23
Yuu / @regret_raym
Web制作のアレコレ 知っていると便利かもしれない
![Page 2: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/2.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
自己紹介
• Webデザイナー
• 制作ユニットArctedで活動
• ぱくたそ(PAKUTASO)のエンジニア
Yuu / Yuji Tsukaguchi
regret_raym
regretraym
![Page 3: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/3.jpg)
http://creator-life.net/
Creator Life
![Page 4: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/4.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ http://arcted.jp/
制作ユニット Arcted
![Page 5: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/5.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ http://pakutaso.com/
無料写真素材サイト
PAKUTASO(ぱくたそ)
![Page 6: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/6.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
https://www.facebook.com/gcss.reference
![Page 7: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/7.jpg)
はじめに
![Page 8: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/8.jpg)
個人的に これは便利だなっていうのを
3つ紹介します
![Page 9: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/9.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
• VirtualDocumentRoot
• CSS Sprite in Mixin
• Displayタグ
![Page 10: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/10.jpg)
VirtualDocumentRoot ローカル環境の整理
![Page 11: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/11.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
• インストール型パッケージ
• 仮想マシンによるサーバ構築
![Page 12: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/12.jpg)
ローカルサーバで サイトを作るときの手順を
簡略化したかった
![Page 13: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/13.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
① サイトのディレクトリを作る
/realestate/ /illust/
![Page 14: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/14.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
② ドメインをそれぞれ設定する
localhost.rearestate.jp localhost.illust.com
![Page 15: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/15.jpg)
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
![Page 16: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/16.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
④ confファイルを作成する
realestate.conf illust.conf
![Page 17: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/17.jpg)
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>
![Page 18: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/18.jpg)
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ファイルを作成する
サイトにあわせて変更
![Page 19: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/19.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
⑤ Apacheをリスタート
• /sbin/service restart
• service restart
• /etc/init.d/httpd restart などなど
XAMPP・MAMPならアプリケーション 再起動とか
![Page 20: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/20.jpg)
① サイトのディレクトリを作る
②ドメインをそれぞれ設定する
③ hostsファイルを設定する
④ confファイルを作成する
⑤ Apache再起動
![Page 21: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/21.jpg)
① サイトのディレクトリを作る
②ドメインをそれぞれ設定する
③ hostsファイルを設定する
④ confファイルを作成する
⑤ Apache再起動
多い!
![Page 22: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/22.jpg)
VirtualDocumentRootを使う
![Page 23: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/23.jpg)
VirtualDocumentRoot は、 ホスト名などの文字列から、
ドキュメントルートを 自動でマッピングしてくれる
![Page 24: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/24.jpg)
① サイトのディレクトリを作る
②ドメインをそれぞれ設定する
③ hostsファイルを設定する
④ confファイルを作成する
⑤ Apache再起動
![Page 25: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/25.jpg)
① サイトのディレクトリを作る
②ドメインをそれぞれ設定する
③ hostsファイルを設定する
④ confファイルを作成する
⑤ Apache再起動
![Page 26: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/26.jpg)
これだけ
![Page 27: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/27.jpg)
VirtualDocumentRootの設定
![Page 28: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/28.jpg)
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とか作成
![Page 29: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/29.jpg)
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の設定
![Page 30: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/30.jpg)
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
![Page 31: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/31.jpg)
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>
ワイルドカードに
![Page 32: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/32.jpg)
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>
![Page 33: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/33.jpg)
DEMO
![Page 34: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/34.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
VirtualDocumentRootのまとめ
• 初めに httpd.confかvhost.conf(任意名)に VirtualDocumentRootを記述する
• 指定したドキュメントルート以下に、サイトごとのフォルダを作る
• Hostsファイルにサイトの設定をする
![Page 35: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/35.jpg)
CSS Sprite in Mixin
![Page 36: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/36.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
サイト高速化の手法の一つ
• 複数の画像を1枚にまとめる
• リクエスト数の削減
• background-positionで表示位置を指定
![Page 37: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/37.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
作り方はいろいろ
• PhotoshopやFireworksなどのグラフィックツールを用いて制作
• Sprite生成用アプリケーションを使用(オンライン・オフライン版)
![Page 38: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/38.jpg)
Sass + Compass
![Page 39: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/39.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
画像切り出し コンパイル
![Page 40: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/40.jpg)
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で フォルダ以下読み込み
![Page 41: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/41.jpg)
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; }
コンパイルの実行時間短縮のために変数に。
![Page 42: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/42.jpg)
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として設定
![Page 43: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/43.jpg)
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を読み込む
![Page 44: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/44.jpg)
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"); }
画像の座標値を指定
![Page 45: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/45.jpg)
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"); }
画像の横幅と 縦幅を指定
![Page 46: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/46.jpg)
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"); }
![Page 47: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/47.jpg)
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
![Page 48: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/48.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
指定画像を表示
#gNav { . hoge{ a{ @include ir( hogehoge ); } } }
SCSS
画像ファイル名 hogehogeを読み込む
![Page 49: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/49.jpg)
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の 座標値が出力される
![Page 50: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/50.jpg)
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
![Page 51: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/51.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
リスト形式で指定画像を表示
#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }
SCSS
リスト定義
![Page 52: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/52.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
リスト形式で指定画像を表示
#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }
SCSS
リスト情報 取り出す
![Page 53: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/53.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
リスト形式で指定画像を表示
#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }
SCSS
リスト内の変数のa要素
![Page 54: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/54.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
リスト形式で指定画像を表示
#gNav{ $gNavList : hoge piyo fuga; @each $list in $gNavList { .#{$list} a{ @include ir( $list ); } } }
SCSS
リスト内の変数と同名ファイルを呼び出す
![Page 55: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/55.jpg)
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
![Page 56: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/56.jpg)
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
![Page 57: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/57.jpg)
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/
![Page 58: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/58.jpg)
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に記述
![Page 59: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/59.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
Compass Sprite Tips
$sprite: sprite-map("sprite/*.png", $spacing: 20px);
生成した画像がぴったりくっつきすぎ
![Page 60: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/60.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
CSS Sprite in Mixin
• Compassを使うと簡単にSpriteが生成できる
• Sprite画像の修正が容易
• @extendを使うことで、コンパクトに
![Page 61: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/61.jpg)
Displayタグ
![Page 62: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/62.jpg)
Donec ornare massa ac orci sodales sodales.
Donec ornare massa ac orci sodales sodales.
Donec ornare massa ac orci sodales sodales.
横幅のサイズや 数が不規則
垂直中央にしたい
![Page 63: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/63.jpg)
Donec ornare massa ac orci sodales sodales.
Donec ornare massa ac orci sodales sodales.
Donec ornare massa ac orci sodales sodales.
横幅のサイズや 数が不規則
垂直中央にしたい
floatでは調整が難しい
![Page 64: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/64.jpg)
displayによるレイアウト display:table;とdisplay:table-cell;
![Page 65: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/65.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
• CSSでテーブル組が実現できる
• vertical-align指定による行揃えが可能
• 幅の均等処理も可能
![Page 66: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/66.jpg)
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
![Page 67: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/67.jpg)
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
![Page 68: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/68.jpg)
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
![Page 69: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/69.jpg)
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.
幅固定
![Page 70: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/70.jpg)
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.
幅可変
![Page 71: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/71.jpg)
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>
![Page 72: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/72.jpg)
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; }
![Page 73: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/73.jpg)
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
![Page 74: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/74.jpg)
Creators MeetUp vol.01
知っていると便利かもしれない Web制作のアレコレ
display:table;タグのまとめ
• display:table;を使うことで、floatで困っていた問題が解決する
• PCはIE8から
• 疑似要素をうまく使うことで、多彩なレイアウトが実現できる
![Page 75: Web制作のアレコレ](https://reader033.vdocuments.site/reader033/viewer/2022060111/55660b66d8b42a06318b47f6/html5/thumbnails/75.jpg)
ありがとうございました