サイト構築 -CSS
[CSS]Flexboxで実装されたグリッドをはじめ、基本となるコンポーネントやページレイアウトのまとめ
Post on:2014年11月20日
ベースとなる12カラムのグリッド、コンテンツとサイドバー、左寄せ・中央配置・右寄せ、ネストしたコンテンツ、天地揃え、ヘッダ・フッタ付きの3カラムのページレイアウトなど、それぞれをFlexboxを使って実装したレスポンシブ
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
Post on:2014年11月17日
最近のWeb制作に役立つ、Sassのmixinのまとめを紹介します。 15 essential Sass mixins
Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize
Post on:2014年11月11日
最近のWebページでよく使用されているさまざまなコンポーネントやエレメントがフラットにデザインされたCSSベースのフレームワークを紹介します。 オープンソースで、個人でも商用でも無料で利用できます。 Materializ
[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック
Post on:2014年11月10日
フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装
[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック
Post on:2014年10月23日
divで実装したパネルに紙がふわりとするようなエフェクトを与えるスタイルシートのテクニックを紹介します。 デモではパネル底の左右がふわりとなります。
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
Post on:2014年10月22日
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs fle
[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック
Post on:2014年10月2日
スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニックを紹介します。 パタッは2種類、↓の一つ目から二つ目を想像してみてください。 デモのアニメーション：一つ目
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
Post on:2014年9月19日
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらい
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
Post on:2014年9月5日
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないス
[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック
Post on:2014年8月27日
シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。
sponsors
