サイト構築 -CSS
[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート
Post on:2017年3月28日
外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。 鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。 B
[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！
Post on:2017年3月27日
文字の半分で異なるカラー、ブラックとホワイトにするCSSのテクニックを紹介します。もちろん、他のカラーでも利用でき、レスポンシブにも完全対応しています。 最近増えてきた2分割のレイアウトにも使えますね。 Vertical
[CSS]これなら簡単！レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy
Post on:2017年3月16日
デスクトップやスマホなど、異なるスクリーンのサイズでも、黄金比や白銀比などのアスペクト比を維持したまま画像や要素を実装するスタイルシートを生成する便利なオンラインツールを紹介します。 このかわいいデザインに、癒やされます
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
Post on:2017年3月14日
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に
[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる
Post on:2017年3月10日
CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。 例えば、768px以下はすべて
[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間
Post on:2017年3月9日
CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け
[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック
Post on:2017年3月8日
レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。 スライドは単にそう見えるだけで、transformでサイドバーを変形させています
Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説
Post on:2017年3月3日
普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイ
[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法
Post on:2017年2月23日
スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多
[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar
Post on:2017年2月22日
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメ
sponsors
