HTML&CSS

SNS対策でOGP設定をする

WebサイトでSNS対策をする場合はOGPの設定をしておきましょう。 OGPとは、Open Graph Protocol(オープン・グラフ・プロトコル)のことです。 Facebookやtwitter、などのSNSでシェアされた時に「ページタイトル、URL、内容、画像(サムネイル)」を意図した通りに表  >>続きを読む

z-indexこうすれば思い通り動く〜ネットや入門書では誤解を生む説明が多いので注意!

HTMLとCSSのレイアウトで親要素の裏側に子要素を移動したい。つまり親子間での重ね順を変える場合どうしてますか? positionプロパティとz-indexプロパティを使って移動させるはずです。 でも、なかなか思い通りに動いてくれないはずです。 もしかしたら、親要素に 「z-index:0」 とし  >>続きを読む

srcsetの使い方とpictureタグの使い方

今回はレスポンシブ画像の表示方法についてです。 HTML5からimgタグで複数の画像を選択できる2つの新しい属性ができました。 それは「srcset」 と 「sizes」属性です。 サンプル 具体的なコード <img srcset="img/train1_small.jpg 300w  >>続きを読む

「width:100%」と「max-width:100%」の違い

今回は「width:100%」と「max-width:100%」の違いについて焦点を当ててみます。 「width:100%」について 次のサンプルを見てください。 全体を囲むdiv要素に「width: 100%」を指定しています。この場合の結果は「width」と「padding」の合計幅がブラウザの  >>続きを読む

ブレイクポイントは「em」で指定〜スマホサイト作成

メディアクエリの設定でブレイクポイントの単位を「px」で指定することが多いと思いますが、「px」で指定するとSafariで思わぬ不具合に遭遇します。 これは2016年頃に広がったネタですが、いまだにSafariでは同様の結果になります。 結論から言うと、ベストプラクティスは「em」単位で指定すること  >>続きを読む

CSS shape-outsideプロパティを使ってみよう

画像に対してfloatをかけて、テキストを流し込みをする場合、通常の写真なら特に問題はないのですが、画像の形を丸くした場合テキストもその円形に沿わせたくなります。 下図参照 このようにするには「shape-outsideプロパティ」を使います。 まず、画像を円形にするにはCSSのプロパティで「bor  >>続きを読む

CSSで立体的に回転するカードの作り方

div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。 回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。 完成サンプル GitHubソース カードの作成 簡単な赤の300 x 500pxのカードを作成します。 <div cla  >>続きを読む

CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小

HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。 フルードイメージはアスペクト比を固定して拡大縮小しますが、当然幅を縮小したら高さ  >>続きを読む