サイト構築 -CSS

リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize

Post on:2017年6月1日

ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、norma

...記事の続きを読む

[CSS]object-fitの賢い使い方: インラインの動画を背景画像のようにブラウザいっぱいに表示するテクニック

Post on:2017年5月31日

HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。 レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示さ

...記事の続きを読む

ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート

Post on:2017年5月29日

Webページやスマホアプリを読み込む際に、ローディングのアニメーションを表示するのをよく見かけます。しかし、最近ではFacebookやSlackなどでインターフェイスプレビューとして、表示される予定のコンテンツをプレース

...記事の続きを読む

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック

Post on:2017年5月19日

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親

...記事の続きを読む

[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック

Post on:2017年5月17日

テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだ

...記事の続きを読む

さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ

Post on:2017年5月16日

HTMLはシンプルに最小限、26種類のさまざまなデザインのボタンを実装されたコレクションを紹介します。 ボタンのスタイルはSASSを使用してコンポーネントベース生成されており、さまざまなボタンのデザインをモジュール式で簡

...記事の続きを読む

2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ

Post on:2017年4月27日

Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹

...記事の続きを読む

CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説

Post on:2017年4月14日

CSS Gridでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。これらは今まで使ってきたものとは大きく異なるため、CSS Gridを始めるのを難しく感じさせるかもしれ

...記事の続きを読む

CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ

Post on:2017年4月11日

CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディ

...記事の続きを読む

CSS Grid Layoutに触れてみよう! CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーター

Post on:2017年4月3日

Webページをレイアウトする際にfloatを使って、そして去年あたりからはflexboxを使っての実装が増えてきたと思います。 CSS Grid Layoutはようやくすべてのデスクトップブラウザでサポートされたばかりで

...記事の続きを読む

 Prev 1 2 3 4 5 ... 89 90 Next

top of page

©2017 coliss