menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/01/19
  • CSS

覚えておくと便利なCSSテクニック

CSS3プロパティを使った、便利なテクニックを書いていきます。覚えるとサイト制作にかなり便利だと思います。
cssテクニック

覚えておくと便利なCSSテクニック

CSS上で数値の計算を行う

レスポンシブサイトなどで横幅100%から15pxだけ引いた設定がしたい場合にとても重宝します。

パーセンテージで割り切れない場合に

こちらはlistをフロートさせる場合にとても便利です。

CSSでカーニング設定をする

letter-spacingがすべての文字を均等に調整するのに対し、font-kerningは特定の文字の組み合わせの時のみ調整してくれます。

テキスト・画像のコピーを無効化

テキストなどを簡単にコピーされたくない人は設定しておくといいと思います。

CSS3プロパティを使った便利なテクニックですが、まだ対応していないブラウザも多くあるので気をつけて使用してください。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11