CSS

よこ並びのCSS。

2017/02/16(Thu) 09:53

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、アイテムリストなど、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。もちろん画面幅にはレスポンシブで。

http://lopan.jp/layout/

最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ

2017/02/16(Thu) 09:53

Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-ui-collections.html

[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート

2017/02/13(Mon) 09:51

背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-blur-experiments.html

[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ

2017/02/10(Fri) 09:52

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。

http://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size

2017/02/01(Wed) 09:51

フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。

http://coliss.com/articles/build-websites/operation/css/responsive-fonts-auto-scaling.html

clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！

2017/01/26(Thu) 10:05

clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義されました。

http://coliss.com/articles/build-websites/operation/css/the-end-of-the-clearfix.html

コーディングの設計について考える事

2017/01/20(Fri) 09:52

CSSの設計は人によって様々で、これが正解というものは無いのですが、何も考えずに作っていくと命名の重複で悩んだり、定義したクラスの使い回しがしづらかったりといった悩みが多くなってきます。これらを防ぐためには、CSSの設計を考えながらコーディングすることが大切です。

https://wp.yat-net.com/?p=5052

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

2017/01/13(Fri) 09:52

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。

http://coliss.com/articles/build-websites/operation/css/modular-web-design-learning-from-lego.html

ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度

2016/12/08(Thu) 10:08

思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。

http://photoshopvip.net/96943

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング

2016/12/02(Fri) 09:46

「Webでは文字詰めはできない」と諦めていませんか？ 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つされています。

https://ics.media/entry/14087