サイト構築 -CSS
[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
[CSS]デザイナーには透明に見えてしまう背景を実装するスタイルシートのテクニック
Post on:2017年6月12日
透明が見える、というのはおかしな日本語ですが、どこからどう見ても透明な背景を実装するスタイルシートのテクニックを紹介します。 透明な背景を使いたい時用に、スニペットに登録しておくと便利です。 サンプル: 透明に見える背景
CSS flexboxのレイアウトで困った時に使えるスタイルシートのテクニックまとめ
Post on:2017年6月6日
flexboxを使ってレイアウトを実装するのは、何年もの間floatやclearfixを使っていた人に新しい驚きと喜びを与えます。主要なブラウザすべてにサポートされ、採用するプロジェクトも増えてきました。 しかし、以前の
リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize
Post on:2017年6月1日
ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、norma
[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック
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だ
sponsors
