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

Columnコラム

TOP
コラム一覧

2023.01.24
Tips

明奈

Flexboxの右側に出来る余白を子要素に振り分ける方法

Flexboxで要素を横並びにした際、子要素の幅が短いと右側に余白ができます。この余白は、flex-growプロパティで、子要素に振り分ける事ができます。 flex-growとは Flexを使用した、親要素の余白を子要素に追加するプロパティです。［フレックスアイテム(子要素)の伸び率を指定するプロパティです。］まずは、Flexで要素を横並びにし、その子要素に［flex-grow
READ MORE
2023.01.23
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
Tips

明奈

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

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

明奈

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

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

明奈

WordPressのプラグイン「Highlighting Code Block」を使用し、簡単にソースコードを表示させる方法

.column-content.content-wrap img {margin: inherit;} 今回は、WordPressのプラグイン「Highlighting Code Block」を使用し、簡単にソースコードを表示させる方法をご紹介します！ ①管理画面→プラグイン→新規追加→検索に「Highlighting Code Block」と入力。表示されたら「
READ MORE
2023.01.10
CSS jQuery

明奈

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

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

明奈

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

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

明奈

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

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

明奈

CSSで長い文章を省略する方法

今回は、下記例示のようにCSSで規定の幅から文字数が多いためにはみ出てしまうテキストを省略する方法です。 See the Pen Untitled by 林 (@hayashi-akina) on CodePen. 下記のコードをいれるだけで、長い文章を「…」に省略してくれます。 .text { white-space: nowrap; overflow:
READ MORE
2022.12.15
CSS

明奈

CSS1行だけで、スムーズスクロールが可能になる方法

スムーズスクロールとは、サイトをタップするだけでアンカーを付けた箇所に画面が滑らかに移動する動きのことです。今回は、JavaScriptを使用せず、スムーズスクロールをCSSだけで実装する方法を紹介します。 html{ scroll-behavior: smooth; } このスムーズスクロールは、ランディングページのナビメニューを設定する際などに
READ MORE