HTML&CSS srcsetの使い方とpictureタグの使い方
今回はレスポンシブ画像の表示方法についてです。
HTML5からimgタグで複数の画像を選択できる2つの新しい属性ができました。
それは「srcset」 と 「sizes」属性です。
サンプル
具体的なコード
srcset属性の使い方
...
HTML&CSS
HTML&CSS HTML&CSS 「width:100%」と「max-width:100%」の違い
今回は「width:100%」と「max-width:100%」の違いについて焦点を当ててみます。
「width:100%」について
次のサンプルを見てください。
全体を囲むdiv要素に「width: 100%」を指定しています。...
HTML&CSS ブレイクポイントは「em」で指定〜スマホサイト作成
メディアクエリの設定でブレイクポイントの単位を「px」で指定することが多いと思いますが、「px」で指定するとSafariで思わぬ不具合に遭遇します。
これは2016年頃に広がったネタですが、いまだにSafariでは同様の結果になります。
...
HTML&CSS CSS〜インライン要素に使えるbox-decoration-breakプロパティについて
インライン要素に対してCSSで装飾することは珍しいかもしれません。
box-decoration-breakプロパティとは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。
具体的にはインライン要素が折り返し状態に...
HTML&CSS CSS shape-outsideプロパティを使ってみよう
画像に対してfloatをかけて、テキストを流し込みをする場合、通常の写真なら特に問題はないのですが、画像の形を丸くした場合テキストもその円形に沿わせたくなります。
下図参照
このようにするには「shape-outsideプロ...
HTML&CSS CSSで立体的に回転するカードの作り方
div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。
回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。
完成サンプル
GitHubソース
カードの作成...
HTML&CSS CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小
HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。
フルードイメージは...
HTML&CSS CSSでクリッピングマスクを使う方法
CSSでマスキングするにはクリピングマスクを使うことができます。
指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。
E { clip-path: shape }
shapeはcircle(...
HTML&CSS headerのコーディング例〜CSS
シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。
古典的な方法
要素を水平方向に中央揃えする方法は簡単に行えます。
例えばdisplay:blockの要素なら、幅を決めてから左右の...
HTML&CSS CSSグリッドの基本〜display:gridの使い方
Grid layoutについて
これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できる...