calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ

Basic_CSS3_Techniques

実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済むCSSテクニックなどをまとめました。今回はWeb制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

画像

マスク

文字

画像

1.画像の下にできる隙間をなくす

picture-below

画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;でOK。他には画像に直接vertical-align: bottom;display:block;を使えます。

css

.sample {
  line-height: 0;
}

2.画像の下にテキストが回り込まないようにする

not-wrap

回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;overflow: auto;を指定します。IE対策でzoom属性zoom:1;も同時に設定します。

css

.sample p{
  overflow: hidden;
  zoom:1;
}

3.floatを使わずに横並び

fbox

いくつもボックスを並べたい場合はfloatの解除を使わずにflexbox を使うほうが簡単です。横並びや並び順の変更など柔軟にレイアウトを変えられるようにまりました。親要素にdisplay: flex;を指定するだけで横並びが完成。中心に配置したいときは-webkit-box-pack: center;を親要素につけるだけ。

※[お詫び] 2015/03/23:コメントにてflexとboxを混同しているとのご指摘を受け修正しました。以下のソースは旧safari用としてコードに-webkit-boxをつけておりました。しかしながら私の理解不足は否めません。また、効率的になった!最近のサイトで使われていたCSS小技集にも書いてあるjustify-content: center;を使用したほうがよいというコメントもいただいております。皆様からのご指摘、ありがとうございました。

css

ul.sample {
  display: flex;
  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>

4.デバイスによって、画像を変更する

imgset

CSS4からになりますが、image-set()を使用するとdevicePixelRatioによる画像表示を変更することが可能です。高解像度の画像と低い解像度の画像を切り替えたいときに。density(値は x )によって画像を変更します。

5.画像の上に文字を配置

ontop-image

こちらも定番ですが、マウスオーバーで注釈を出すシンプルな方法。通常時に注釈を一旦隠し、マウスオーバー時に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>

6.鏡像

miller

ちょっとトリッキーな小技。box-reflectを使うと鏡が反射した時のような効果を出すことができます。1枚の画像だけでこれができるのはすごい。参考サイトでは、-webkit-gradientを指定して自然な見え方にしています。

css

.sample {
  height: 500px;
  overflow: hidden;
}
.sample img{
  -webkit-box-reflect: below;
}

マスク

7.画像を斜めにくり抜く

mask-skew

背景画像を固定させたら擬似要素を作成し、要素を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>

8.写真をくり抜く

hollow-photos

プロパティclip: rect(上, 右, 下, 左 )を使うとコンテンツや画像の表示範囲を指定することができます。positionプロパティの値はabsolute、rectの中は(上 右 下 左)となります。600×300の写真をくり抜くと以下のように。

css

.sample img{
  position: absolute; 
  clip: rect(100px 500px 200px 100px);
}

9.文字で画像をくり抜く

mask-text

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>

10.2枚の画像を透過合成する

mask-synth

:cross-fade()を使うと2枚の画像を合成できます。2枚の画像URLを指定します。100%に近づくにつれ1枚目の透過度が高くなります。

css

.mask-synth {
  background: -webkit-cross-fade( url(img/sample1.png) ,url(img/sample2.jpg) , 50% );
  background-size: cover;
}

11.写真と色をブレンドする

mask-blend

Photoshopのように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。

12.すりガラス風のボックス

frost

ぼかすだけなら-webkit-filter: blur()でOKですが、こちらのサイトに擬似要素を使い、背景だけぼかし文字をそのまま表示する詳しい方法が書いてありましたのでメモ。

文字

13.文字の中心に線をひく

center-character

そろそろ画像を使わず、CSSのみで線の上に文字をのせたい。そんな時はこちらのサイトが参考になります。display: flex;と擬似要素を使ったシンプルな記述方法がリンク先の後半で解説してあります。

14.二行目以降を1字下げる

subsequent-second

こちらもごく基本的なインデントの使い方。text-indentにマイナスの値を設定して二行目以降にインデントを付ける方法。本来は1行目のインデントを指定するプロパティです。

15.spanで改行させる

break-span

問い合わせページの注釈など、brを使わずに改行する最も簡単な方法。改行させたい文字をspanで囲み、display: block;でOK。

16.文中のbrを一発で消す

br-reject

不用意に入れられたbrタグが邪魔だけど多すぎて消すのに苦労しそう。一発で消す方法がありました。こちらでご紹介してあるようにp br { display: none; }で消すことが可能です。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする