今回は、CSSをまとめて記述する際に使いやすい「where:()」を紹介します。 「where:()」とは CSSの擬似クラス関数で、複数のセレクタを1つにまとめることができます。 「where:()」以外にも、同じく複 […]

今回は、指定した要素だけをなくすことができる［display:contents］を紹介します。 ［display: contents］を知る前に、まずはボックスモデルを確認 ボックスモデルとは、「HTMLやXHTMLで定 […]

clamp()関数とは clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中の条件に合うものが適用されます。 フォントサイズや横幅をスマートフォン用にいちいち設定しなくても、幅に合わせて最適 […]

今回は、pointer-eventsプロパティを使用して、重なった要素の後側にリンクを効かせる方法を紹介します！ また、下記の記事のではスマートフォン、タブレットのみに効かせる方法としても紹介しました！　気になる方は併せ […]

今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。 まずは実装デモがこちら。 デモ内［Result］の［Run Pen […]

今回は、HTMLで電話番号のリンクを設定する方法を紹介します。 電話番号のリンクを設定するとどうなる？ リンクを設定した場所をタップするだけで直接電話を発信することができるようになるため、ユーザーにとって使いやすいサイト […]

以前、［text-overflow］を使用して文章を省略する方法を書きましたが、この場合ですと、一行のみで行数を指定して省略することはできません。 行数を指定したい場合は、CSSの［line-clamp］が便利です。 l […]

!importantとは？ 指定するとどうなる ［!important］は、CSSスタイルが適用される優先順位を最優先にする際に用いられます。 何よりも優先してCSSの指示を効かせるやり方で、CSSスタイルがどうしても効 […]