akina@autoproject.biz | Page 6 of 8 | 自動化する会社　オートプロジェクト

Columnコラム

TOP
コラム一覧

2023.03.10
CSS

明奈

「Swiperフェードを使用時に、透過した画像が重なってしまう問題」の解決方法

以前、SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法を書きましたが、Swiperのスライダーライブラリでフェードエフェクトを指定している場合、透過している画像を使用した際に下の画像と重なってしまう問題があります。今回は、それを解決するコードを紹介します。方法は簡単です。下記オプションを追加するだけです。 fadeEffect: cross
1. Swiper
READ MORE
2023.03.07
CSS

明奈

CSSで文章を複数の列に分ける方法［幅指定編］

前回はCSSで文章を複数の列に分ける方法を紹介しました。今回は1列の幅を指定する、column-widthプロパティを紹介します。 column-widthとは CSS のプロパティで、列の幅を設定することができます。指定方法要素 {column-width: 値;} 値は、CSSで使える長さを表す値すべて使えます（px,em等）。 column-widthを指
READ MORE
2023.03.03
Tips

明奈

二段階認証［Wordfence版］WordPressのWordfenceプラグインとGoogle Authenticatorアプリを使用してログイン二段階認証を実装する方法

今回はWordPressサイトの不正アクセスをより防ぐ、ログイン二段階認証の設定する方法をお伝えします！設定方法なのでWordfenceプラグインのインストール方法は割愛させて頂きます。まずは、最初の準備として、「Google Authenticator」アプリをApp StoreかGoogle Playでダウンロードしてください。次にWordfence
1. Wordfence
2. セキュリティ
READ MORE
2023.02.22
CSS

明奈

CSSで文章を複数の列に分ける方法

今回はCSSで文章を複数の列に分ける方法を紹介します。文章が一行表示で横に長いと読みづらく、ユーザービリティを損なう場合があります。そこで、CSSのプロパティで分割することによって見やすくし、可読性を高めることができます。 column-countプロパティとは「column-count」はCSSのcolumn-countプロパティで、指定された列で要素の内容を表示します。
READ MORE
2023.02.20
CSS

明奈

簡単！　HTMLだけでアコーディオンメニューを作成する方法②｜CSSでデザイン変更

前回、「簡単！　HTMLだけでアコーディオンメニューを作成する方法 ①」で、HTMLのみで作成する手順を紹介しました。気になる方は、前回の記事もご覧ください。今回は、CSSでデザインを少し変更してみます。デザイン変更する手順 ①既存の矢印を非表示にする（既存の矢印でいい場合は必要ありません） ②カーソルポインターを変更（こちらはお好みで） ③アニメーションをつ
READ MORE
2023.02.17
CSS HTML

明奈

簡単！　HTMLだけでアコーディオンメニューを作成する方法 ①

アコーディオンメニューはjqueryやJavaScriptで作成する方法もありますが、今回はHTMLのみでアコーディオンメニューを作成する方法を紹介します。アコーディオンメニューとは Webページおけるナビゲーションメニューのひとつで、選択した項目がその場で広がり、隠れていた詳細内容を表示するメニューのこと。限られた範囲で多くの項目を一覧表示することが可能なため、利便性が高い。 HTMLだ
READ MORE
2023.02.09
CSS

明奈

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

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

明奈

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

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

明奈

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

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

明奈

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

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