サイト構築 -CSS
[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ
Post on:2017年7月20日
ページのローディング時によく使われる、アニメーションの動きが新しく、デザインもかわいいCSSで実装されたスピナーを紹介します。 一昔前のと比べると、そのデザインも動きも洗練されています。 Spinners & Page
[CSS]「:before擬似要素」と「:after擬似要素」の使い方を基本からマスターするためのチュートリアル
Post on:2017年7月19日
HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。
CSSのみでは実装できない、気持ちいい動きのちょっと面白いホバーエフェクト -Attract hover effect
Post on:2017年7月12日
周りがうねうねしたサークル状のアイコン、ホバー時にどんなインタラクションを想像しますか？ カラーが変化したり、裏返しになったり、サイズが大きくなったり、いろいろなエフェクトが考えられると思います。 あまり見たことがない、
[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures
Post on:2017年7月10日
float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositio
[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ
Post on:2017年7月3日
レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カー
CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura
Post on:2017年6月28日
CSSの知識は必要なく、そして時間もない時に、簡単にいい感じのデザインになるCSSのフレームワークを紹介します。 CSSが苦手な人に、バックエンドで作業する用の即席プロトタイプにも最適です。 既存のHTMLに一行、もしく
[CSS]テキストが長いとレイアウトが崩れる！予期せぬコンテンツに対応するためのスタイルシートのテクニック
Post on:2017年6月23日
テキストとアイコンを横並びさせたボタン、カテゴリのテキストを配置したラベル、ラベルが長いフォームなど、これらのテキストが長いとレイアウトが崩れてしまうことがあります。 レイアウトが崩れてしまう予期せぬコンテンツに対応する
[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip
Post on:2017年6月22日
見た目は普通のツールチップ。軽快なアニメーションで表示されるのも、表示方向を指定できるのも探せばあると思います。 しかしその中身はピュアCSS、1kbの超軽量スタイルシートで実装された、スマホもサポートされたツールチップ
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
Post on:2017年6月20日
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
Post on:2017年6月14日
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcal
sponsors
