【ハマりポイント解説】CSSでアイコン付きボタンを作る

# はじめに
Web制作においてボタンを実装する際にアイコンつきのボタンを実装するケースが多いかと思います。
加えて、最近はTailwindやUIテンプレートを使用することもあり、なかなか素のCSSを書く機会が減ってきました。
そんな中、久しぶりにCSSを書く機会があり、個人的にホバー時の挙動やアイコンの位置調整で少し躓いたので改めて作り方をざっくりまとめます。

:::note
この記事ではCSSを使ったアイコン付きボタンの作り方を学べます
:::

# 今回作るボタン（完成形）

gridでつくる不揃いの画像ギャラリー

# はじめに

画像ギャラリーをgridで実装しました。
7枚の画像が不揃いに並んでいるレイアウトです。

デザインカンプに準じて、
①gridを使う、
②画像の増減でレイアウト崩れしないように、
という指示のもと行ったコーディングです。

「画像が不揃い」というだけでも難しかったのですが、
「画像の増減でレイアウトが崩れないようにする」というのがさらに難しく、時間がかかりました。
その時のコードを見直し、違いを比較してみました。

# 読者対象
・HTML/CSSでコーディングをしている人
・gridレイアウトに不慣れな人

# 開発環境
用意するファイルはindex.htmlとstyle.cssです。
index.htmlからstyle.cssを読み込みます。

# 実装手順
・gridで画像を不揃いに並べる。
・画像の増減でレイアウトが崩れない

静的サイトの問い合わせフォーム設置が簡単すぎた話

# はじめに
静的サイトで簡単に問い合わせフォームを設置する方法がないか調べ、SSGformというサービスが思った以上に使いやすかったので備忘録も兼ねて投稿します。

# SSGform
SSGformは静的サイトでも使えるフォーム機能を提供しているサービスで、2022年サービス開始と比較的新しいサービスになります。
機能的にも必要なものがしっかりまとまっており非常にいい感じです。

https://ssgform.com/features

## 会員登録
会員登録画面はすごくシンプルなので迷うことはないと思います。登録時はフリープランしか選択できないようです。

## 管理画面
管理画面もすごくシンプルなのでまぁ迷うことはないでしょうね
![スクリーンショット 2023-09-30 000909.p

【HTML 学習】見出しタグについて

## 見出しタグのｈは何という単語の略か？
見出しタグの「ｈ」は「ｈｅａｄｉｎｇ」の略。
つまり日本語で言う「見出し」そのまんま。

## 見出しの種類は６種類だけ
見出しの種類は以下の６種類
ｈ７やｈ８などを試しに入力してみたが思ったとおり、テキストとして表示される。そもそもタグとして存在していないので、当然のことか…
どうしてもｈ７やｈ８のような表現をしたい場合、`dlタグ` `dtタグ` `ｄｄタグ` を代用して表現することは可能。
自分が必要になることはない？かな？

## 見出しタグで目次の判断がされている
目次を自動で作成してくれる各種サービスにおいて、目次作成の判断は見出しタグでされる。
また、目次はSEO効果を向上させることにもつながるので、見出しを設定すると言うことは、SEO的に

【CSS】要素を中央寄せしたいときに用いる手法3選

【CSS】要素を中央寄せしたいときに用いる手法3選

はじめに

※こちらはフロントエンド初心者のかた向けの記事になっています。
CSSによって要素を中央寄せしたいときによく用いていた手法を3選紹介します。

その1　display:flexを用いた中央寄せ

中央寄せしたい要素の親要素に対して下記のようなflexを付与させます。そうすることで子要素は中央寄せになります。この手法を用いる場合、子要素は1つのみだと調整しやすいです。

        .parent-element {

          display: flex;

          justify-content: center;

          align-items: center;
 

HTML と CSS の役割分担の考察

# はじめに

最近 [Tailwind] を使って実装することがあり、HTML の class 属性で見た目の定義をすることに何となく違和感を感じていました。それをきっかけに、HTML と CSS の役割分担について考察してみたので、ここではその内容を記載してみます。

尚、Tailwind を批判する目的はありません。自分の今までの取り組み方の問題点に気づくまでの過程を説明するのに都合が良かったので Tailwind を使用しています。

# TL;DR

```mermaid
flowchart LR
Tailwind --> 違和感 --> a[考察] --> b[理想形]
b --> 構造上の意味 --> |を表現| HTML
b --> 見た目上の意味 --> |を解釈| s[Scoped CSS] --> 共通CSS

subgraph 1つのファイル
HTML
s[Scoped CSS]
end
```

# Tailwind の良いと思うところ

- **CSSファイルが不要**
HTMLファイルとCSSファイルを行ったり来たりする手間を省けます。
- *

【HTML 学習】文章の表示＜ｐ＞タグ

## ｐは何の略か
段落を表すタグ「ｐ」タグは「paragraph」の略で、にほんごにすると、「段落」。そのまんま。

ｐタグを使うことでながながとした文章も段落が分かれてみやすくなる。（正確にはｐタグ意外でも使えるタグはあるが、文章を書くときの基本はｐタグ）

?ｐタグなし?
今日はam６：００に起きました。いつもならam5:00に目が覚めて活動するのですが、今週初めから体調を崩して毎日寝つけない日が続いたことが原因でしょう。朝活はできませんでしたが、いつもの起床時間より１時間遅かっただけなので、自分のことを褒めてあげてもいいかなと思いました。

?ｐタグあり?
今日はam６：００に起きました。

いつもならam5:00に目が覚めて活動するのですが、今週初めから体調を崩して毎日寝つけない日が続いたことが原因でしょう。

朝活はできませんでしたが、いつもの起床時間より１時間遅かっただけなので、自分のことを褒めてあげてもいいかなと思いました。

## ｐタグを使うことのメリット
ｐタグにすることによって各要素との余白の調整が可能になるので、ユーザーの **文章の見やすさ** というアクセ

ランダムに文字を表示させよう～DOM～

# 初めに
ここではHTMLにJavaScriptを使ってランダムに文字を表示させる方法について説明します。
JavaScriptからHTMLに反映させるために自分が行っていた非推奨な例と推奨される例について紹介します。
# 非推奨方法
* **HTML**
```

## 作成のきっかけ
コロナが世に出て、5類となった今も毎日の体温チェック・体調管理はマストです?

```mermaid
graph TD;
PC立ち上げ-->メールを開く;
メールを開く-->体調管理シートを開く;
体調管理シートを開く-->入力して送信;
```
ざっくりですが毎日こんなフロー。

どうせ毎朝入力する体調管理シートにも何かプラスαの付加価値を付けられないか考えていました。
思いついたきっかけはこれでした。
Microsoft Rewards
検索するごとにポイントが貯まるのですが
この今日の一言では偉人たちの名言をピックアップして教えてくれます。
![imag

ChatGPTが書いたコードで切手計算アプリ作成！

## これって切手いくら必要？
普段のオフィスでよく聞かれる会話ではないでしょうか。
手紙の重さを量ってからインタネットで郵便局のホームページで切手の金額を確認する手間がかかる、面倒だなと思ったことはありますか。

## デジタルツールを活用して便利に調べられないのか
少し前、LINEBotで西暦和暦変換アプリを作って好評だったので、また何か作ろうという気持ちは常にあります。
（LINEBotで西暦和暦変換の記事は下記となります）

みんさん、お盆休みはどのように過ごしていますか
下記の記事を書きましたので、読んでくださいね
西暦を和暦に変換して教えてくれる！ #LINEBOT 【HTML】Tableタグ：CSS編：デフォルトのスタイルを確認しよう！

?Table【 デフォルトのスタイル 】
を確認しよう！

・th：太字、左右中央、上下中央
・td：太さ普通、左寄せ、上下中央

・背景色、余白：なし
・罫線：二重線

?何も設定しなくても上下中央寄せになるのが嬉しいですね！

See the Pen
Table by tomok7 (