プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。サービスサイトでさりげなく使われているものや、今後増えそうなものなど。横並び1.今までの回り込み解除これまで多く使われていた回り込み解除する方法から。浮いた親要素の高さを算出します。hidden;でOK。IE対策でzoom属性zoom:1;も同時に設定します。clear:both;など。clearfixに比べ手軽ですが、ボックスからはみ出た部分を隠してしまうので印刷やドロップシャドウで問題が出やすいので使い分けが必要です。以前より簡単にマークアップできるようになりましたね。使うことにより横並びや並び順の変更など柔軟にレイアウトを変えられるように。flex;を記述します。複雑なレイアウトをシンプルに実現できます。株式会社LIG3.均等に並べる/段組みIE8からですけどdisplay:table-cellを使えば、要素を横並びにするときに幅を指定しなくても均等に並べることができます。スマホ専用メインであれば積極的に使いたいですね。table-cell;のすごいところは、border-rightなどで区切り線を入れたときにコンテンツ量に合わせて同じ高さで表示されるところです。ドロップダウンtransitionを指定することでマウスオーバー時のアニメーションを設定できるようになります。メガドロップダウンECサイトや企業サイトなどによく使われるメガドロップダウンメニュー。最近増加傾向にあるスペースの制限を解決するUI。多いですけど、これからもガンガン増えていくと思います。横からスライドして出てくるメニューの実装方法。CodePenコンテンツメニュー7.モーダルウィンドウモバイル向けページ作成の場合、ページ表示の問題を解決するために、ページ遷移を減らす施策としてポップアップ表示が増えてきました。以下、CSS(CSS3)のみで実装するモーダルウィンドウ。BlackFlag8.アコーディオンレスポンシブ対応でCSSのみで作るドロップダウンとアコーディオン切り替えメニュー。ちびと.net9.タブパネルコンテンツ部分の表示をフェードインによって制御している例。CSS(CSS3)のみでタブUI(ボタンアクティブ付き)を実装する方法。BlackFlagテーブル10.ストライプテーブルセルを見やすくするには罫線と余白の使い方がポイントとなりますが、こちらはjQueryのCSS3セレクターを利用して、奇数行のth要素、偶数行のtr要素にそれぞれclass属性を追加し、ストライプを作ることによって見やすい表にする方法。UIデザイン入門11.レスポンシブ+テーブルIEの問題が残されてますが、レスポンシブでのテーブルの見せ方と対応方法はこちらが一番参考になるかと。「counter-increment」を使うと番号を自動的に付けることができます。counterプロパティを適用する要素にbefore、after要素を付けcontentプロパティでカウンタ名を指定することで連番を挿入することができます。詳しくはcounter-incrementプロパティで。「content」は対応する全ての要素の前後に内容(文字列や画像等)を追加するプロパティ。h3の直前に「♪」を入れる場合は要素の直前にbefore、指定する文字はcontentに♪と入れるだけでh3全てに自動で♪が入ります。他にも指定の文字だけでなく、urlで画像、counter関数で番号、attr関数で属性値なども表示可能です。m-School透過処理14.影・背景だけ透明にするボタンなんかにつけると見栄えがよくなります。rgbaのほうを使います。opacityは不透明を表し、rgbaの最後につけるalphaは色の透明度を表します。opacityはセレクタ全体が不透明、rgbaは背景色や影だけ透明にすることが可能です。値を透明度と同時に指定できます。指定hsla()メソッドでは左から順に、色相(h)・彩度(s)・明度(L)・透明度(a)のパラメータを使い色を表現できます。色相の0が赤、彩度0%でモノクロ、明度0%で黒、アルファは0が透明といった感じ。円を描くことができます。これもWPテーマや企業サイト内で使っているところが増えてきました。OZPAの表417.三角形を描く吹き出しやリボンを作るときに、覚えておくと便利です。ボーダーの左右と上に異なる指定をすることで▼をつくります。log18.吹き出しチャットや投稿ページなどで吹き出しを表現したりすることもあるかと思います。画像を使わずにCSSだけで吹き出し(三角形)を描画する方法。Hail2u.net19.矢印スマホによくついている画像を使わない矢印の作り方。rotate(45deg);といった感じでtransformで45度に回します。source20.円形グラデーションradial-gradientで円形グラデーションを作成することができます。Awesomeをborder-radius:50%で囲むだけでOKです。アイコン一覧はこちら。画像ではなくテキストとして表示されるので、色やサイズ変更が驚くほど簡単。企業サイトやWPテーマでアイコンフォントを使っているサイトを多くみるようになりましたよね。レスポンシブの実装も効率的に行えるので積極的に使ってよいと思います。フォントでアイコン表示。WATCH22.和文Webフォント和文フォントは漢字や文字数の多さから制作コストが高くなり、有料のものが多くなりますが、フリーだと表示速度などの問題が出てくるのもあります。いえ今後和文フォントは挑戦してみたい分野の一つなのでメモしておきます。和文が使えるウェブフォントをメモしておきます。FONTS画像処理23.画像を円で切り抜くborder-radiusを使って画像を円形に切り抜き線で囲む方法。201124.画像を三角に切り抜くこちらは画像を三角形で切り抜く方法。見かけるわけではないですけど、ちょっと珍しいのでメモ。urlプロパティでマスクに利用したい画像を指定。不透明箇所が残る部分となります。くらげだらけ26.フィルタ+ぼかし「-webkit-filter」を使うとぼかしやセピア色など、Photoshop上で行っていたことを簡単に指定出来るようになります。コードを指定するだけでフィルタを自動で反映させます。アイキャッチ画像なんかに使えそうです。blur(10px);を使えば写真をぼかすことができます。写真やテキストをマウスホバーでボカシたりするサイトも最近みるようになりました。始まりと終わりのパラメータを指定し、滑らかに変化させます。ease-in-out;といった指定でボタンホバー時に動きを出します。linear(等速変化)。Lecture28.マウスホバーで画像拡大Webkitのみとなりますが、マウスホバーで画像を拡大する方法。拡大後は画像に対してCSS3ドロップシャドウをつけています。BlackFlag背景29.フルスクリーンフラットデザインで作る場合、ラージフォトスタイルで奥行きを与えたいところです。こちらは背景を画面全体にする方法。background-size:cover;で背景画像のアスペクト比(縦横比)を保ちつつ、常にその画像1枚だけでウィンドウいっぱいに表示させています。imagesで複数の背景画像を指定できるようになりました。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2016/04/25これは凄い!Web制作が捗るモーフィング系の最新スニペットまとめある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。前回(あのサイトでさりげなく使われていたCSS小技集)の続きとなります。コメントデータの処理方法の詳細はこちらをご覧ください。