1分で読める！【CSS】placeholder属性の色を変更する方法

f:id:ume1017:20201126182412j:plain



本日のテーマは、

フォームのプレースホルダーの文字色を変更する方法です！

 

placeholder属性とは？

inputタグで実装できる入力フォーム内に

表示する文字のことです。

 

＜サンプルコード＞

<input type="text" placeholder="Email Address">

 

通常、placeholder属性で指定した文字の色は、

グレーっぽい色をしています。

 

placeholderの文字の色を調整する方法

input::placeholderセレクタで指定すればOKです！

　

input::placeholder {
color: #ccc;
}

 

1分で読める！【HTML】アコーディオンをHTMLだけで実装する方法

f:id:ume1017:20201125184927j:plain


本日のテーマは、

アコーディオンをHTMLだけで実装する方法です！！

 

アコーディオンとは？

クリックすると隠されたメニューがヌルッと表示されることです！

ホームページとかではメニューの一覧を表示する際に使用してます。

 

実装方法

 

detailsとsummaryタグを使用すればOKです！

detailsタグで囲んだ箇所がアコーディオンとして設定されます。

summaryタグで囲んだ箇所をクリックすると

詳細分（summaryタグで囲まれてない箇所）が表示されます。

 

＜サンプルコード＞

<details>
　<summary>ボタンをクリック</summary>
 メニュー１。メニュー２。メニュー３。
</details>

 

1分で読める！【CSS】表のセル内の長さを均等にする方法

f:id:ume1017:20201124183042j:plain


本日のテーマは、

文章の下に波線を引く方法です！

 

実装方法

CSSで「 table-layout: fixed;」を使用すればOKです！

実際の使い方は下記の通りです。

sample{
 table-layout: fixed;
}

 

この記述でセルの長さが均等になります。

この記述をしてないと、セルの長さが要素の長さで決まってしまい

セル毎で長さが変わってしまいます。

1分で読める！【CSS】文章の下に波線を引く

f:id:ume1017:20201123190013j:plain


本日のテーマは、

文章の下に波線を引く方法です！

 

実装方法

CSSで「text-decoration: underline wavy 色」を使用すればOKです！

実際の使い方は下記の通りです。

sample{
 text-decoration: underline wavy #ffff66;
}

 

アンダーラインを引くのは文章の一部だと思うので、

span要素でアンダーラインを引きたい文章を囲む必要もあります。

1分で読める！【CSS】CSSで計算式を使用する方法

f:id:ume1017:20201122191907j:plain

 

本日のテーマは、

CSSで計算式を書く方法です！

 

実装方法

CSSで「calc()」を使用し、カッコの中に計算式を書けばOKです！

実際の使い方は下記の通りです。

sample{
 width: calc(100% / 3 - 60px);
}

 

calc()を使用すれば

複雑な幅の設定も可能になるかと思います！