HTML

HyperText Markup Languageの略
拡張子は「.html」
文章の構造（文字や表）を記述するための言語

CSS

Cascading Style Sheetsの略
拡張子は「.css」

ページをデコレーションするためのスタイルシート
背景色や文字・画像の大きさを指定できる

記述場所は、HTMLファイルののコード内だったり、CSS単独のファイルだったりする
該当のHTMLファイル内でしか使用しない場合は、HTMLのファイル内のheadタグに記述し、 様々なファイルで使用する場合はCSS単独のファイルに記述している

JavaScript

Javaとは別の言語で、ホームページに適したScript言語
拡張子は「.js」

こちらはホームページ作成には必須ではない
ホームページに動きを加えるときに必須となる

記述場所は、HTMLファイルののコード内だったり、JavaScript単独のファイルだったりする
該当のHTMLファイル内でしか使用しない場合は、HTMLのファイル内のbodyタグに記述し、 様々なファイルで使用する場合はJavaScript単独のファイルに記述している

私は別のページで同じコードを記述する際はJavaScriptを使用し、編集をしやすくしている
上部のメインメニュー等のアイコンがJavaScriptで記述している部分である
こちらはJavaScript単独ファイルに記述している
また、数学のランダム問題の作成に使用している
こちらはHTMLファイル内に直接記述している

VSCode(Visual Studio Code)

ダウンロード手順はこちらには記載しないので調べてほしい
メモ帳等でもコードは記述できるが、このアプリを使うと、 タグの一部を入力すると閉じタグが自動的に入ってくれるなど便利である
ふんわりとしか覚えていないコードなんかも自動変換も出てくるため、記述がしやすい

見栄えよりも使いやすさ重視

私のホームページはプロが作るページのように見栄えのいいものではない
どのアイコンをクリックするとどういう内容が表示されるか、分かりやすいものにしている
並び順も意識し、どのページを見てほしいかという点も何気に意識している

画像の作成

有料ということもあり、イラストレーターを使いこなすことは私にはできないので、 PowerPointを使用して画像を作成している
PowerPointではグラデーションもできるし、ワードアートなんかも挿入できる
（Wordでもできると思うが、個人的な管理のしやすさからPowerPointで作成している）
プロが作るホームページではなく、素人に毛が生えた程度の私が作る分には問題ないかなと思っている
こちらも、ホームページを作る際に意識していることと同様、タイトル画像を見ただけでどういう内容かわかるようにしている

下記は「Excelで知る数学の世界」というページのタイトル画像である

こちらのページはExcelや数学のカラーを意識し、青×緑の背景色にしているため、同様の色にしている

ivy先生のイラスト

copilotに条件を入れて、実際の私に似せて作ったものです

ボタン画像

影を入れることで、ボタンと認識しやすくしている
いくつかテンプレートを作っているので、それをコピーし使用するだけでできるようにしている

タイトルに表示されるアイコン

素人が作っているページとはいえ、小さい部分までこだわって作っている
ページ上部のタイトルに表示されるアイコンも作っている

こちらは小さいが、自分のページであることをアピールできる
他のページを見ていて私のページを見たいときにすぐに探せるようになっている
統一感を出すため、数学・Excel関連とそれ以外でアイコンの背景色が異なっている

noteというサイト

noteというサイトはExcelなどのファイルをアップロードすることができる
以前はこちらで記事を書いていた
サーバーを移行してからこのページ上に掲載したが、セキュリティではじかれるという人がいたため、noteでの掲載に戻した
こちらはセキュリティではじかれることは少ないように思う

テンプレートの作成

それぞれのページごとに特徴がある
毎回一から作成するのは面倒なのでそれぞれのページで使用できるテンプレートを作成している
別のページのものをコピーしてやるっていうのもありかと思いますが、私のホームページはページ数が多いので、 テンプレートを作成して、それをコピーして使用している