タグ

2020年7月5日のブックマーク (2件)

  • サイトの質が向上!コピペできるHTML/CSS便利スニペット100個まとめ

    この記事では、Webデザイン制作に便利なコピー&ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて最新HTMLCSSスニペットをまとめています。 コンテンツ目次 1. 小技テクニック系(15個) 2. 面白、ユニーク系(16個) 3. ホバーエフェクト系(6個) 4. テキストエフェクト系(10個) 5. ページレイアウト系(10個) 6. イメージスライダー系(9個) 7. ナビゲーションメニュー系(2個) 8. ローディングアニメーション系(4個) 9. ボタンエフェクト系(13個) 10. CSSマジック(10個) 11.

    サイトの質が向上!コピペできるHTML/CSS便利スニペット100個まとめ
  • 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

    そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的(?)になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考: img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら? なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

    【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい