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

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

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

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

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

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

前回、「簡単！　HTMLだけでアコーディオンメニューを作成する方法 ①」で、HTMLのみで作成する手順を紹介しました。気になる方は、前回の記事もご覧ください。 今回は、CSSでデザインを少し変更してみます。 デザイン変更 […]

アコーディオンメニューはjqueryやJavaScriptで作成する方法もありますが、今回はHTMLのみでアコーディオンメニューを作成する方法を紹介します。 アコーディオンメニューとは Webページおけるナビゲーションメ […]