calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

知っておくと速い!CSS3に関する「便利」なまとめ

CSS3_Properties_Index

先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。

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

もくじ

知っておきたいプロパティ

スマホサイト対策

知っておきたいプロパティ

自動で文字や数を調整したり、画像の効果を出したりするプロパティをメモしておきます。これらを使うことでグンと効率化できそうです。

1.カウント数を出力

count_css

「counter-increment」を使うと番号を自動的に付けることができます。counterプロパティを適用する要素にbefore、after要素を付けcontentプロパティでカウンタ名を指定することで連番を挿入することができます。詳しくはcounter-incrementプロパティで。

2.要素の前後に文字や画像

characters_element_css

「content」は対応する全ての要素の前後に内容(文字列や画像等)を追加するプロパティ。例えばh3の直前に「♪」を入れる場合は要素の直前にbefore、指定する文字はcontentに♪と入れるだけでh3全てに自動で♪が入ります。他にも指定の文字だけでなく、urlで画像、counter関数で番号、attr関数で属性値なども表示可能です。

3.カーニング

kerning_css

「text-rendering: optimizeLegibility」はカーニングと合字を自動で調整してくれます。ただしフォントが合字などの情報を保有する場合。ヒラギノ角ゴ・明朝はカーニングが調整可能とのことです。

4.画像フィルタ

image_filter_css

「-webkit-filter」を使うとぼかしやセピア色など、Photoshop上で行っていたことを簡単に指定出来るようになります。コードを指定するだけでフィルタを自動で反映させます。アイキャッチ画像なんかに使えそうです。

5.均等幅にレイアウト

「flexbox」は従来のfloatプロパティに比べて横並びや並び順の変更など柔軟にレイアウトを変更できます。

6.アニメーション一覧

CSS3のアニメーションはJavaScriptだけで表現するのに比べ処理が軽いです。制御はJS、動きはCSSにとそれぞれの記述を分類できるメリットがあります。以下、使いやすくするうえで知っておきたいものを中心にまとめました。

スマホサイト対策

スマホサイトにも対応させてくれと言われることがほとんどなので、そんな時に便利なプロパティなどをメモしておきます。

7.viewport

viewport_css

viewportの設定方法をパターン別で解説。指定しない時、width=device-width、320と指定した時などのデモと採用例を記載してあります。

8.改行削除

これどういう時に使うのかというと、例えばスマートフォン専用のアフィリエイトテキスト。brなどが入っていてコード改変不可なものがあります。そういった時に改行をCSSで消したり。

9.Webクリップアイコン

icon_css

iPhone と Androidのファビコンやホームアイコンの指定方法。光沢ありなし、サイズ指定など詳しく書いてあります。

10.UIリセット/入力フィールド拡張

extension_css

「appearance」を使うと、本来そうではない要素に指定の要素の振る舞いを指定することができます。デフォルトの状態だと自由度が少ないセレクトボックスも、自由に見栄えを変更することが可能です。

11.横並び

side_css

「display:table-cell」を使えば、要素を横並びにするときに幅を指定しなくても均等に並べることができます。

12.ボタンサンプル

button_sample_css

比較的コードがシンプルで画像が要らないボタンサンプル集。膨大な量のサンプルが掲載してあるのですごく助かりますね。

13.画像を使わない矢印

arrow_css

タップできる右端によくついている「>」をCSSのみで実装する方法。

14.自動改行

automatic_css

word-break・word-wrap・white-spaceに関する折り返しの検証。

15.はみ出しを隠す

hide_css

はみ出した内容を表示しないようにするoverflow:hidden。

16.末尾に「…」をつける

the_end_css

こちらはテキストが領域からはみ出ている場合に省略符号( ... )をつける。

17.フォント指定例

CSS3から新しく登場した単位である「rem」の使い方と書き方。

スポンサード リンク

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

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

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

Comments

Leave a Comment

コメントする