サイト構築 -CSS

[CSS]レスポンシブ対応の最新版!サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ

Post on:2017年7月31日

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering hor

...記事の続きを読む

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」

Post on:2017年7月26日

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です

...記事の続きを読む

[CSS]アニメーションの動きもデザインも新しくて気持ちいい!コピペで実装できるローディングスピナーのまとめ

Post on:2017年7月20日

ページのローディング時によく使われる、アニメーションの動きが新しく、デザインもかわいいCSSで実装されたスピナーを紹介します。 一昔前のと比べると、そのデザインも動きも洗練されています。 Spinners & Page

...記事の続きを読む

CSSのみでは実装できない、気持ちいい動きのちょっと面白いホバーエフェクト -Attract hover effect

Post on:2017年7月12日

周りがうねうねしたサークル状のアイコン、ホバー時にどんなインタラクションを想像しますか? カラーが変化したり、裏返しになったり、サイズが大きくなったり、いろいろなエフェクトが考えられると思います。 あまり見たことがない、

...記事の続きを読む

[CSS]marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック

Post on:2017年7月11日

まずは、クイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか? What'

...記事の続きを読む

[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の超軽量スタイルシートで実装された、スマホもサポートされたツールチップ

...記事の続きを読む

top of page

©2018 coliss