HTML・CSS | Page 6 of 7 | 自動化する会社　オートプロジェクト

Columnコラム

TOP
コラム一覧
HTML・CSSの一覧

2023.02.09
HTML・CSS

明奈

CSS詳細度を高めないので使いやすい！　まとめて記述する際に便利な疑似クラス「where:()」とは

今回は、CSSをまとめて記述する際に使いやすい「where:()」を紹介します。「where:()」とは CSSの擬似クラス関数で、複数のセレクタを1つにまとめることができます。「where:()」以外にも、同じく複数のセレクタをまとめることができる「:is()」などがありますが、「where:()」の場合はCSSの詳細度を持たないため、スタイルを上書きする際に使いやすいです。
READ MORE
2023.02.06
HTML・CSS

明奈

指定した要素だけをなくすことができる、便利な「display: contents」

今回は、指定した要素だけをなくすことができる［display:contents］を紹介します。［display: contents］を知る前に、まずはボックスモデルを確認ボックスモデルとは、「HTMLやXHTMLで定義された要素はすべて長方形のボックスの中に納められている」という考え方です。 HTMLの要素はどの要素も、下記の図のように「ボックス」と呼ばれる領域を生成します。
READ MORE
2023.01.30
HTML・CSS

明奈

レスポンシブなフォントサイズに設定できるCSSのclamp()関数が便利

clamp()関数とは clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中の条件に合うものが適用されます。フォントサイズや横幅をスマートフォン用にいちいち設定しなくても、幅に合わせて最適なサイズにしてくれます。 clamp(最小値,推奨値,最大値) 推奨値：要素の大きさ最小値と最大値の間である限り推奨値が適用最小値：最も小さい値で、推奨値が
READ MORE
2023.01.27
HTML・CSS

明奈

重なった要素の後側にリンクを効かせる方法

今回は、pointer-eventsプロパティを使用して、重なった要素の後側にリンクを効かせる方法を紹介します！また、下記の記事のではスマートフォン、タブレットのみに効かせる方法としても紹介しました！　気になる方は併せてご覧ください！ HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介 pointer-eventsプロパティとはホバーやクリックなどのマ
READ MORE
2023.01.23
HTML・CSS

明奈

SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法

今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。まずは実装デモがこちら。デモ内［Result］の［Run Pen］をクリックしてください。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen.
1. Swiper
READ MORE
2023.01.20
HTML・CSS

明奈

HTMLで電話番号のリンクを設定する方法 – スマートフォンのみの設定方法も紹介

今回は、HTMLで電話番号のリンクを設定する方法を紹介します。電話番号のリンクを設定するとどうなる？リンクを設定した場所をタップするだけで直接電話を発信することができるようになるため、ユーザーにとって使いやすいサイトになります。電話番号のリンク設定方法は？設定は簡単です。［a href=""］に［tel:］を入れるだけです。 ※番号は任意の番号を入れてください。ハイフンはなしでも
READ MORE
2023.01.18
HTML・CSS

明奈

CSSのみで文章の行数を指定し、省略する方法

以前、［text-overflow］を使用して文章を省略する方法を書きましたが、この場合ですと、一行のみで行数を指定して省略することはできません。行数を指定したい場合は、CSSの［line-clamp］が便利です。 line-clampとは［line-clamp］は、文章を指定した行数に制限することができるプロパティになります。また、［line-clamp］は拡張機能を実装するベ
READ MORE
2023.01.10
HTML・CSS

明奈

CSSで指定した!important をjQueryのcssTextプロパティを使い上書きする方法

!importantとは？指定するとどうなる［!important］は、CSSスタイルが適用される優先順位を最優先にする際に用いられます。何よりも優先してCSSの指示を効かせるやり方で、CSSスタイルがどうしても効かない場合に使うと、便利です。ただ、［!important］を使用しすぎると、どのスタイルが優先するか、ブラウザが混乱する為、乱用は避けましょう。 jQueryでの上書き
1. jQuery
READ MORE
2023.01.06
HTML・CSS

明奈

flexでの余白指定はgapが使いやすい

gapとは gap は css のプロパティで、アイテム同士の横方向と縦方向の余白をまとめて指定する事ができます。 marginプロパティーやpaddingプロパティーでも余白は指定できますが、gridやflexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。では、gapプロパティーを使用し縦10px、横20pxの余白を作ります。下記、HTML
READ MORE
HTML・CSS

明奈

CSSだけで補足情報を表示させる方法

ツールチップって何？ツールチップは、テキストやリンク、画像などの補足説明の事でマウスオーバーした際に表示されます。ALTに近いものになります。ツールチップの実装のためにCSSの関数attr()を利用することができます。以下、実装例になります。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen.
READ MORE