実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済むCSSテクニックなどをまとめました。今回はWeb制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。
もくじ
画像
マスク
文字
画像
１．画像の下にできる隙間をなくす
画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;でOK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。
css
.sample {
line-height: 0;
}
２．画像の下にテキストが回り込まないようにする
回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE対策でzoom属性zoom:1;も同時に設定します。
css
.sample p{
overflow: hidden;
zoom:1;
}
３．floatを使わずに横並び
いくつもボックスを並べたい場合はfloatの解除を使わずにflexbox を使うほうが簡単です。横並びや並び順の変更など柔軟にレイアウトを変えられるようにまりました。親要素にdisplay: flex;を指定するだけで横並びが完成。中心に配置したいときは-webkit-box-pack: center;を親要素につけるだけ。
css
ul.sample {
display: flex;
display: -webkit-box;/* Safari */
list-style: none;
padding: 0;
}
ul.sample li {
margin: 10px;
word-wrap: break-word;
}
html
<ul class="sample"> <li><img src="img/sample.png" ></li> <li><img src="img/sample.png" ></li> <li><img src="img/sample.png" ></li> </ul>
４．デバイスによって、画像を変更する
CSS4からになりますが、image-set()を使用するとdevicePixelRatioによる画像表示を変更することが可能です。高解像度の画像と低い解像度の画像を切り替えたいときに。density（値は x ）によって画像を変更します。
５．画像の上に文字を配置
こちらも定番ですが、マウスオーバーで注釈を出すシンプルな方法。通常時に注釈を一旦隠し、マウスオーバー時にtranslateY()で縦方向に移動させます。
css
figure.sample {
color: #fff;
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
}
figcaption.overray-cap {
background: rgba(0,0,0,.5);
bottom: 0;
left: 0;
position: absolute;
transform: translateY(100%);
transition: all .35s;
width: 100%;
-webkit-transition: all .35s;
}
figure.sample:hover .overray-cap {
transition-delay: .1s;
transform: translateY(0);
}
figure.sample img {
vertical-align: bottom;
width: 100%;
}
html
<figure class="sample"> <img src="img/test006.jpg" > <figcaption class="overray-cap"><p>注釈</p></figcaption> </figure>
６．鏡像
ちょっとトリッキーな小技。box-reflectを使うと鏡が反射した時のような効果を出すことができます。１枚の画像だけでこれができるのはすごい。参考サイトでは、-webkit-gradientを指定して自然な見え方にしています。
css
.sample {
height: 500px;
overflow: hidden;
}
.sample img{
-webkit-box-reflect: below;
}
マスク
７．画像を斜めにくり抜く
背景画像を固定させたら擬似要素を作成し、要素をskew()で傾け、translateで移動させます。そうすると以下のように斜めのブロックを作り出すことができます。
css
.sample {
background-image: url(img/sample.jpg);
background-size: cover;
height: 500px;
overflow: hidden;
}
.sample:after {
content: "";
display: block;
height: 100%;
background: #2ECC71;
transform: skew(0,170deg) translate(0,20%);
}
.sample:before {
content: "";
display: block;
height: 50%;
background: #2ECC71;
transform: skew(0,170deg) translate(0,-20%);
}
html
<div class="sample"></div>
８．写真をくり抜く
プロパティclip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。positionプロパティの値はabsolute、rectの中は(上 右 下 左)となります。600×300の写真をくり抜くと以下のように。
css
.sample img{
position: absolute;
clip: rect(100px 500px 200px 100px);
}
９．文字で画像をくり抜く
background-clipを使えば、画像をテキストでくり抜くことができます。以下は親要素に背景色をつけ、任意の文字はcolor: transparent;で透過させます。
css
.sample h2{
-webkit-background-clip: text;
background-image: url(img/sample.jpg);
color: transparent;
font-size: 125px;
text-align: center;
}
html
<div class="sample"> <h2>SAMPLE</h2> </div>
１０．２枚の画像を透過合成する
:cross-fade()を使うと２枚の画像を合成できます。２枚の画像URLを指定します。100%に近づくにつれ１枚目の透過度が高くなります。
css
.mask-synth {
background: -webkit-cross-fade( url(img/sample1.png) ,url(img/sample2.jpg) , 50% );
background-size: cover;
}
１１．写真と色をブレンドする
Photoshopのように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。
１２．すりガラス風のボックス
ぼかすだけなら-webkit-filter: blur()でOKですが、こちらのサイトに擬似要素を使い、背景だけぼかし文字をそのまま表示する詳しい方法が書いてありましたのでメモ。
文字
１３．文字の中心に線をひく
そろそろ画像を使わず、CSSのみで線の上に文字をのせたい。そんな時はこちらのサイトが参考になります。display: flex;と擬似要素を使ったシンプルな記述方法がリンク先の後半で解説してあります。
１４．二行目以降を1字下げる
こちらもごく基本的なインデントの使い方。text-indentにマイナスの値を設定して二行目以降にインデントを付ける方法。本来は１行目のインデントを指定するプロパティです。
１５．spanで改行させる
問い合わせページの注釈など、brを使わずに改行する最も簡単な方法。改行させたい文字をspanで囲み、display: block;でOK。
１６．文中のbrを一発で消す
不用意に入れられたbrタグが邪魔だけど多すぎて消すのに苦労しそう。一発で消す方法がありました。こちらでご紹介してあるようにp br { display: none; }で消すことが可能です。
スポンサード リンク