Columnコラム
-
CSSで文章を複数の列に分ける方法今回はCSSで文章を複数の列に分ける方法を紹介します。 文章が一行表示で横に長いと読みづらく、ユーザービリティを損なう場合があります。 そこで、CSSのプロパティで分割することによって見やすくし、可読性を高めることができます。 column-countプロパティとは 「column-count」はCSSのcolumn-countプロパティで、指定された列で要素の内容を表示します。READ MORE
-
簡単！ HTMLだけでアコーディオンメニューを作成する方法②｜CSSでデザイン変更前回、「簡単！ HTMLだけでアコーディオンメニューを作成する方法 ①」で、HTMLのみで作成する手順を紹介しました。気になる方は、前回の記事もご覧ください。 今回は、CSSでデザインを少し変更してみます。 デザイン変更する手順 ①既存の矢印を非表示にする（既存の矢印でいい場合は必要ありません） ②カーソルポインターを変更（こちらはお好みで） ③アニメーションをつREAD MORE
-
簡単！ HTMLだけでアコーディオンメニューを作成する方法 ①アコーディオンメニューはjqueryやJavaScriptで作成する方法もありますが、今回はHTMLのみでアコーディオンメニューを作成する方法を紹介します。 アコーディオンメニューとは Webページおけるナビゲーションメニューのひとつで、選択した項目がその場で広がり、隠れていた詳細内容を表示するメニューのこと。限られた範囲で多くの項目を一覧表示することが可能なため、利便性が高い。 HTMLだREAD MORE
-
CSS詳細度を高めないので使いやすい！ まとめて記述する際に便利な疑似クラス「where:()」とは今回は、CSSをまとめて記述する際に使いやすい「where:()」を紹介します。 「where:()」とは CSSの擬似クラス関数で、複数のセレクタを1つにまとめることができます。 「where:()」以外にも、同じく複数のセレクタをまとめることができる「:is()」などがありますが、「where:()」の場合はCSSの詳細度を持たないため、スタイルを上書きする際に使いやすいです。READ MORE
-
指定した要素だけをなくすことができる、便利な「display: contents」今回は、指定した要素だけをなくすことができる［display:contents］を紹介します。 ［display: contents］を知る前に、まずはボックスモデルを確認 ボックスモデルとは、「HTMLやXHTMLで定義された要素はすべて長方形のボックスの中に納められている」という考え方です。 HTMLの要素はどの要素も、下記の図のように「ボックス」と呼ばれる領域を生成します。READ MORE
-
レスポンシブなフォントサイズに設定できるCSSのclamp()関数が便利clamp()関数とは clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中の条件に合うものが適用されます。 フォントサイズや横幅をスマートフォン用にいちいち設定しなくても、幅に合わせて最適なサイズにしてくれます。 clamp(最小値,推奨値,最大値) 推奨値：要素の大きさ最小値と最大値の間である限り推奨値が適用 最小値：最も小さい値で、推奨値がREAD MORE
-
重なった要素の後側にリンクを効かせる方法今回は、pointer-eventsプロパティを使用して、重なった要素の後側にリンクを効かせる方法を紹介します！ また、下記の記事のではスマートフォン、タブレットのみに効かせる方法としても紹介しました！ 気になる方は併せてご覧ください！ HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介 pointer-eventsプロパティとは ホバーやクリックなどのマREAD MORE
-
SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。 まずは実装デモがこちら。 デモ内［Result］の［Run Pen］をクリックしてください。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen.READ MORE
-
HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介今回は、HTMLで電話番号のリンクを設定する方法を紹介します。 電話番号のリンクを設定するとどうなる？ リンクを設定した場所をタップするだけで直接電話を発信することができるようになるため、ユーザーにとって使いやすいサイトになります。 電話番号のリンク設定方法は？ 設定は簡単です。［a href=""］に［tel:］を入れるだけです。 ※番号は任意の番号を入れてください。ハイフンはなしでもREAD MORE
-
CSSのみで文章の行数を指定し、省略する方法以前、［text-overflow］を使用して文章を省略する方法を書きましたが、この場合ですと、一行のみで行数を指定して省略することはできません。 行数を指定したい場合は、CSSの［line-clamp］が便利です。 line-clampとは ［line-clamp］は、文章を指定した行数に制限することができるプロパティになります。 また、［line-clamp］は拡張機能を実装するベREAD MORE