今回は、前回のレスポンシブ対応｜HTMLだけで、PC画像とSP画像を切り替える方法の続きで、pictureタグを使用してwebp画像の設定と、Retinaディスプレイ対応の設定をしていきたいと思います。 webp画像の設 […]

PC画像とSP画像のデザインが変わる際、CSSのメディアクエリで切り替えたりJavaScriptを使用して切り替える方法もありますが、今回はHTMLのpictureタグを使用して簡単に画像の切り替えができる方法を紹介しま […]

親要素にinnerで幅指定がついている場合などに、その子要素の一部だけ画面いっぱいに表示させるには、親要素から子要素を出してコーディングをする方法をとるなど、少し手間がかかる場合があります。 そんな場合に、CSSで一部の […]

今回は、スライダーのプラグイン［slick］を使用して、スライダーに動画を入れ、自動再生してくれるように作成します。 初めに まずはどんな感じになるか、画像をクリックしてデモをご覧ください。 slickの設定 最初に［s […]

今回は、PCだと表示されるのに、スマホになると動画が表示されないという場合の解決方法を紹介します。 設定は簡単で、HTMLのvideoタグに以下属性を入れるだけです。 autoplay  自動再生 playsinline […]

以前、SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法を書きましたが、Swiperのスライダーライブラリでフェードエフェクトを指定している場合、透過している画像を使用した際に下の […]

前回はCSSで文章を複数の列に分ける方法を紹介しました。今回は1列の幅を指定する、column-widthプロパティを紹介します。 column-widthとは CSS のプロパティで、列の幅を設定することができます。 […]

今回はCSSで文章を複数の列に分ける方法を紹介します。 文章が一行表示で横に長いと読みづらく、ユーザービリティを損なう場合があります。 そこで、CSSのプロパティで分割することによって見やすくし、可読性を高めることができ […]