calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

知っておくと便利!あのサイトでさりげなく使われていたCSS小技集

CSS_Beginner_Tutorial

2014/12/01:続編である「最近のサイトで使われていたCSS小技集」を書きました。

今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたいCSSテクニックです。

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

もくじ

画像

簡単に要素を並べる

条件に応じて

テキスト

フルスクリーンメニュー

画像

1.キュレーションサイト風のランキングボタン

curation_css

キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させるWPプラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。

html

<ul class="sample">
  <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>

  <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>

  <li><img src="xxx.png" ><span class="post-title">テストテストテストテストテストテストテストテスト</span></li>
</ul> 

css

ul.sample {
  overflow: auto;
}

ul.sample li {
  counter-increment: sample ;
  clear: both;
  line-height: 2;
  list-style-type: none;
  position: relative;
}

ul.sample li:before {
  border-radius: 50%;
  background: #222;
  color: #fff;
  content: counter(sample);
  left: -5px;
  line-height: 1.5;
  font-size: 12px;
  padding: 0 5px;
  position: absolute;
  top: 5px;
}

ul.sample img {
  height: 55px;
  float: left;
  padding: 10px 10px 0 0;
  width: 55px;
}

span.post-title {
  font-size: 14px;
  line-height: 2;
}

counterプロパティを適用する要素にbefore、after要素を付けcontentプロパティでカウンタ名を指定することで連番を挿入することができます。

他にcontentプロパティは、h1{ content: url(logo.png);}のように文章やテキストなどに画像を入れたり置換することも可能です。

2.画像の右上に三角形の要素を配置する

triangle_css

長方形のラベルは見かけるけど、三角形はまだ多くないのでメモ。画像の右上に三角形のスペースを作り文字を載せる方法。横幅200pxの画像の上に三角形ラベルを配置したい場合は以下のようになります。

html

<div class="image-inner">
  <img src="xxxx.png" width="200" height="100" >
  <span class="triangle">xxxx</span>
</div>

css

.image-inner {
  overflow: hidden;
  position: relative;
  width: 200px;
}

.triangle {
  background: #222;
  color: #FFF;
  font-size: 14px;
  padding: 70px 0px 3px;
  position: absolute;
  right: -97px;
  top: -41px;
  text-align: center;
  width: 200px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
 }

3.透過ネオンカラー

流行りの兆しがありそうなネオンカラーの透過(0.8の部分は調整してください)カラーコードをいくつかメモしておきます。写真の上に載せるとそれっぽく見えます。画像の上に載せるラベルなどに使ったり。

16進数 RGBa(赤,青,緑,透過)
#8c24c8 rgba(140,36,200,0.8)
#4d4dff rgba(77,77,255,0.8)
#ff6ec7 rgba(255,110,199,0.8)
#ff2090 rgba(255,32,144,0.8)
#18ff00 rgba(24,255,0,0.8)
#00ff00 rgba(0,255,102,0.8)
#83f52c rgba(131,245,44,0.8)
#ffff00 rgba(255,255,0,0.8)

4.画像の表示範囲を指定

range-image_css

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

5.透過させながら画像を合成する

synthesize-image_css

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

background: -webkit-cross-fade( url(xxx.jpg) ,url(xxx.jpg) , 50% );

6.マスクをかける

mask-img_css

WebKit系のみ可、IEは非対応ですがmask-imageを使うとマスクをかけることが出来ます。mask-sizeは表示サイズ、mask-positionは表示位置を示します。

-webkit-mask-image: url(img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;

簡単に要素を並べる

7.左右に分割して区切り線を入れる

separator-line_css

簡単にカラム数を増やし区切り線を入れます。column-countでカラム数を増やし、column-ruleで区切り線を入れます。

html

<div>
  <p>
  それは一生いよいよその指導者として事のところで作ったた。いくら将来と用意違いはやはりこの採用たでかもから当てばいなけれには使用するだたて、多少にもまかり出ですましたた。
  </p>

  <p>
  しかも今安心にしてはいませのあるて、中学には、何しろ私かするてするれないない読んられるないないとするて、言葉はかけるて出したん。
  </p>
</div>

css

div {
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  -webkit-column-count: 2;

  -moz-column-rule: solid 1px #ccc;
  -ms-column-rule: solid 1px #ccc;
  -o-column-rule: solid 1px #ccc;
  -webkit-column-rule: solid 1px #ccc;
}

8.段組(横並びで配置)

stage-sets_css

要素を横並びさせるならテーブル構造のdisplay: tabledisplay: table-cell;でも表現出来ます。

メリットはborderによる区切り線の高さを揃えたり、vertical-align: middle;で高さの中心に要素も持ってきたり出来るところです。

html

<div class="column-table">
<p class="mini-column">そうして筋か正直か誤解を担がたて、今中自分をあらといたいために大指図の絶対に思うらしくまし。</p>
<p class="mini-column">今をもどうしても考えて蒙りありますですますて、今にいくらとどまるが脱却はなぜ恥ずかしいでのな。</p>
<p class="mini-column">つまりこう万年は手本が好いで、ほかに何だか考えたでしとするば、ないたべきてそこでお安心へ味わっずたら。</p>
</div>

css

.column-table {
  display: table;
  width: 100%;
}

p.mini-column {
  display: table-cell;
  vertical-align: middle;
  width: 30%;
  word-break: break-all;
}

9.空要素に色をつける

empty-element_css

セレクタに:emptyを指定することによって、空要素にスタイルシートを適用することが可能となります。

td:empty {background: black;}

条件に応じて

10.条件に一致しないと適用

「○○」じゃない時スタイルを適用したい!そんな時は否定疑似クラス:not()を使います。例えばnot(h1)だけだと、bodyにも「h1以外」が適用されてしまうので、以下のようにクラス名などをつけ詳細まで指定します。

.logo :not(h1) {background: black;}

11.条件一致すれば適用

こちらはCSS4からのセレクタです。:matches()を使用すると、指定したセレクタと一致した場合にスタイルを適用出来ます。

テキスト

12.中だけ透過させてアウトラインを表示

outline-transmitting_css

text-strokeで文字にアウトラインを表示できます。color: transparent;を指定することで中を透過させる事が出来ます。分かりにくい時はフォントサイズを大きくします。

h1 {
  color: transparent;
  -webkit-text-stroke: 1px #222;
}

13.文字詰め

fontkerning_css

text-rendering: optimizeLegibility;でカーニング処理を行います。以下のサイトによると「ヒラギノ角ゴ・明朝」を指定していればカーニングが働くとのことです。

14.アンチエイリアス

font-smoothingで文字を滑らかに表示します。

div {
  -webkit-font-smoothing: antialiased;
}

フルスクリーンメニュー

これから少し多くなりそうな画面全体をオーバーレイさせメニューを表示するものをCodropsからチョイスしました。

menu-slide_css

画面の切り替え時に、画面の縦方向全体を使いブヨっとした動きを出すスライダー。

menu-modal-window_css

要素をクリックすることで、全画面に中身が表示されるエフェクト。

menu-overlay_css

オーバーレイでメニューを出します。visibilityプロパティでボックスを消さず、表示・非表示を切り替えています。こちらのエフェクトはよく見かけるようになりました。

スポンサード リンク

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

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

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

Comments

  1. […] 4. CSS:知っておくと便利!あのサイトでさりげなく使われていたCSS小技集 […]

Leave a Comment

コメントする