# WEB制作TIPS - WEB customization TIPS > とあるWEBコーダーが自分の勉強のために制作した個人サイトです。HTML・cssのパーツやWordPressで使うコードなど、WEBサイト制作の備忘録をまとめています。 --- ## WEB制作の備忘録 - [CSSで自動で連番をつけたリストを作成する](https://customizatips.com/tips/timeline-ol/): 今回は自動で連番を付けたリストを作成しま... - [HTMLとCSSでタイムラインを作りました](https://customizatips.com/tips/timeline-ul/): 今回はHTMLとCSSでタイムライン風の... - [画像hoverアニメーション例のまとめ](https://customizatips.com/tips/img-hover-animation/): 今回は、カーソルを画像に合わせたときのア... - [クリックしたら開閉する機能をjsなしで作る方法](https://customizatips.com/tips/checkbox-open/): 見出しをクリックしたら開閉する機能を作り... - [タブ切り替えをHTMLとCSSだけで実装する方法](https://customizatips.com/tips/radio-tab/): ボタンをクリックすると、表示されるコンテ... - [WordPressを簡単インストールする流れ](https://customizatips.com/tips/wordpress-install/): WordPress（ワードプレス）という... - [ドメイン設定をする流れ](https://customizatips.com/tips/set-domain/): 独自ドメインを取得しました！... が、... - [独自ドメイン永久無料特典を利用するには](https://customizatips.com/tips/domain-free-benefits/): 通常、独自ドメインの取得には費用がかかり... - [レンタルサーバー申し込みの流れ](https://customizatips.com/tips/server-application/): レンタルサーバーの申し込みの流れをメモし... --- ## 投稿 - [WEBサイト観察日記 #1](https://customizatips.com/topics/observation-diary01/): WEBサイトを公開したので、定期的にWE... - [ごあいさつ](https://customizatips.com/topics/greetings/): はじめまして。このWEBサイトを作りまし... --- ## 固定ページ - [プライバシーポリシー](https://customizatips.com/privacy-policy/): WEB customization TI... - [お問い合わせ](https://customizatips.com/inquiry/): WEB customization TI... - [プロフィール](https://customizatips.com/profile/): こんにちは。このWEBサイトを作りました... --- # # Detailed Content ## WEB制作の備忘録 - Published: 2025-09-26 - Modified: 2025-09-26 - URL: https://customizatips.com/tips/timeline-ol/ - WEB制作の備忘録のタグ: CSS, HTML 今回は自動で連番を付けたリストを作成します。別の記事で作成したタイムラインを応用してカスタマイズしました。完成形はこちらです。 01タイトルが入ります。 01の項目の簡単な説明が入ります。 02タイトルが入ります。 02の項目の簡単な説明が入ります。 03タイトルが入ります。 03の項目の簡単な説明が入ります。 ちなみにタイムラインの記事はこちら。一部今回の記事と同じ説明をしているところがあります。 https://customizatips. com/tips/timeline-ul/ 自動連... --- - Published: 2025-09-23 - Modified: 2025-09-26 - URL: https://customizatips.com/tips/timeline-ul/ - WEB制作の備忘録のタグ: CSS, HTML 今回はHTMLとCSSでタイムライン風のパーツを作ってみました。コピペで次のようなタイムラインができます。 01タイトルが入ります。 01の項目の簡単な説明が入ります。 02タイトルが入ります。 02の項目の簡単な説明が入ります。 03タイトルが入ります。 03の項目の簡単な説明が入ります。 そのHTMLとCSSがこちら！会社の沿革とかで使ったりします。他には1日のスケジュールの流れとか。では、こちらのHTMLとCSSについて簡単に説明していきます。※CSSでrem指定しているところは、使用する... --- - Published: 2025-09-15 - Modified: 2025-09-18 - URL: https://customizatips.com/tips/img-hover-animation/ - WEB制作の備忘録のタグ: CSS 今回は、カーソルを画像に合わせたときのアニメーション例をご紹介します。 画像にaタグでリンクを設定することがあります。たとえばバナーとか。ページ内のリンク画像にマウスカーソルを合わせたときに、何かしら画像に変化があった方がリンク画像だとわかりやすいです。では、実際に見てみましょう。※PCだとマウスカーソルを合わせたときの動きがわかりやすいです。ですが、スマホだとタップしてページが切り替わるまでの間しか見られないので微妙かもしれません。 今回の基本のコードはこちら。このHTMLとCSSをベースにし... --- - Published: 2025-09-07 - Modified: 2025-09-07 - URL: https://customizatips.com/tips/checkbox-open/ - WEB制作の備忘録のタグ: CSS, HTML 見出しをクリックしたら開閉する機能を作ります。よくある質問のQ&Aなどで使うことが多いですね。たとえば、「ホームページを作るのに何を用意したらいい？」のような質問をクリックすると、それの回答が開く... というイメージです。次のような仕上がりになります。 こちらはAのタイトルです Aのコンテンツを表示します。 こちらはBのタイトルです Bのコンテンツを表示します。 こちらはCのタイトルです Cのコンテンツを表示します。 使用するHTMLとCSS では、クリックしたら開閉する機能をどのように実装し... --- - Published: 2025-09-05 - Modified: 2025-09-07 - URL: https://customizatips.com/tips/radio-tab/ - WEB制作の備忘録のタグ: CSS, HTML ボタンをクリックすると、表示されるコンテンツを切り替えるタブ切り替えの機能をHTMLとCSSだけで実装します。JavaScriptでクリックしたらクラスを付与して... のようなことはしません。なぜなら、私はJavaScriptが苦手だからです！（恥）むやみやたらにJavaScriptを増やして競合されるのが怖いので、可能な限り使わないようコーディングしてきました。簡単にタブ切り替えできる方法はないものか... と探して見つけた方法です。次のような仕上がりになります。 Aのボタン Aのコンテンツ... --- - Published: 2025-08-31 - Modified: 2025-09-07 - URL: https://customizatips.com/tips/wordpress-install/ - WEB制作の備忘録のタグ: WordPress, レンタルサーバー WordPress（ワードプレス）という、超絶便利なCMSをレンタルサーバーでインストールする手順をメモしておきます。 ポイント CMS（コンテンツマネジメントシステム）とは、ざっくり言うと、専門知識がなくてもWEBサイトの更新ができるシステムのことです。通常WEBサイトのページを作成するには、HTMLやCSSなどのコードをを使います。ですが、CMSだと文章を入れて画像をアップロードして... など簡単な操作方法を覚えるだけで、WEB上に公開できるページが作成できます。 このWEBサイトもWor... --- - Published: 2025-08-28 - Modified: 2025-09-07 - URL: https://customizatips.com/tips/set-domain/ - WEB制作の備忘録のタグ: ドメイン, レンタルサーバー 独自ドメインを取得しました！... が、取得しただけでレンタルサーバーで利用できるようになっていません。レンタルサーバーでドメインを利用するために、「ドメイン設定」をしたときのことをメモしておきます。 ※XServerでの設定の流れです。他のレンタルサーバーを利用されている方の場合、参考にならないかもしれませんのでご注意ください。※スクリーンショットは旧デザインのものです。 ちなみに、ドメイン取得の流れはこちら。 https://customizatips. com/tips/domain-fr... --- - Published: 2025-08-24 - Modified: 2025-09-07 - URL: https://customizatips.com/tips/domain-free-benefits/ - WEB制作の備忘録のタグ: ドメイン, レンタルサーバー 通常、独自ドメインの取得には費用がかかりますが、XServerでは無料で利用できる特典があります。私はこちらの特典を利用してドメインを取得しました。ですが、契約したプランによっては申請に条件があり、取得できるドメインもプランごとに違います。例えばスタンダードプランの場合、次のような条件があります。 特典利用の条件 「12ヶ月」以上の契約期間を選択して料金を支払う 自動更新設定を有効にする 永久無料特典を利用したい場合は、プランの契約前に条件を確認しておきましょう。 では、特典利用の流れをメモして... --- - Published: 2025-08-21 - Modified: 2025-09-07 - URL: https://customizatips.com/tips/server-application/ - WEB制作の備忘録のタグ: レンタルサーバー レンタルサーバーの申し込みの流れをメモしておきます。私が選んだのはXServerでした。その理由は、最初からWordPressを利用する予定だったこと、仕事で一番利用しているレンタルサーバーだったことです。あと、期間限定のキャンペーンをしていてお得だったので。 事前にこちらの準備をしておきましょう。 どのプランにするか決めておく メールアドレスや電話番号などの、アカウント情報に設定する個人情報 本気でWEB制作に取り組む覚悟 では、レンタルサーバーのホームページにアクセスしましょう！XServe... --- --- ## 投稿 - Published: 2025-09-20 - Modified: 2025-09-21 - URL: https://customizatips.com/topics/observation-diary01/ - カテゴリー: 管理人のつぶやき - タグ: 観察日記 WEBサイトを公開したので、定期的にWEB customization TIPSの観察日記でも書こうかと思います。その第1弾です。 サイトの公開日は2025年9月14日。WordPressの表示設定で「検索エンジンでの表示」の「検索エンジンがサイトをインデックスしないようにする」のチェックを外した日です。 公開時の記事数です。 WEB制作の備忘録の記事数：6件 管理人のつぶやきの記事数：1件 固定ページ：3ページ 記事数は少ないですが、総ページ数が10を超えたら公開しようと思っていました。 Go... --- - Published: 2025-08-17 - Modified: 2025-09-11 - URL: https://customizatips.com/topics/greetings/ - カテゴリー: 管理人のつぶやき - タグ: 雑談 はじめまして。このWEBサイトを作りました、ヒロスミメグムです。現在コーダーとして働いており、趣味で個人サイトを始めてみました。 ここではWEB制作に役立つ情報を投稿していこうと思っています。例えばHTMLやCSSを使ったコーディングや、WordPressの機能についてなどですね。自分がこれまで制作してきたことの備忘録にします。実際に私が困ったことの解決法なども投稿していきますので、同じように困っている方の参考になりましたら嬉しいです。 以下は別に読まなくていいやつです。お暇な方のみどうぞ！ 個... --- --- ## 固定ページ - Published: 2025-08-16 - Modified: 2025-09-13 - URL: https://customizatips.com/privacy-policy/ WEB customization TIPS（以下、当サイト）では、当サイトの訪問者（以下、ユーザー）の個人情報の取り扱いについて、プライバシーポリシーを下記のように定めます。 個人情報の利用目的 当サイトではお問い合わせの際に、お名前やメールアドレス等の個人情報を入力していただく場合がございます。取得した個人情報は、お問い合わせいただいた件に対する回答等のご連絡に利用させていただくものであり、それ以外の目的では利用いたしません。 アクセス解析ツールについて 当サイトでは、Googleタグマネー... --- - Published: 2025-08-16 - Modified: 2025-09-07 - URL: https://customizatips.com/inquiry/ WEB customization TIPSへのお問い合わせは、こちらのお問い合わせフォームからお送りください。メールアドレス欄に入力されたアドレス宛に、お問い合わせの控えを自動返信いたします。控えのメールが届かない場合は、入力されたアドレスに誤りがあった・迷惑メールフォルダに入っている・何らかのトラブルにより自動返信されなかった可能性がございます。メールの送信から一週間以上経過しても当サイトからの返信がない場合、お手数ですが再度お問い合わせください。 ※フォームの各入力欄は必須項目です。必ず全... --- - Published: 2025-08-02 - Modified: 2025-09-24 - URL: https://customizatips.com/profile/ こんにちは。このWEBサイトを作りました、ヒロスミ メグムです。E-A-Tの強化ができるかも～という記事がネット上にあったので、こうしてプロフィールページを作ってみました。こちらのページでは、私のプロフィールを簡単にご紹介します。 私のプロフィールなんか誰得だよって感じですが、よかったらご覧ください。 これまでの経歴 高校卒業後に某工場に就職。3年ほど勤めましたが、退職しました。 それから、デザインやコーディング関係のことが学べる職業訓練校に入学。そこで現在勤めている会社の求人票を見つけたことか... --- ---