HP作成一覧 2025.04.262025.04.27 目次 0.開発環境の作成1.準備2.画像で作成3.実装 0.開発環境の作成 VSCodeのダウンロードおよびインストールhtmlなどのコードの編集にはマイクロソフトが開発しているVSCodeの使用を推奨します。Windows,macOS,Linuxで動作します。いかにダウンロードの方法を書いていきます。 ダウンロード ダウンロードは以下のページから行うことが... XAMPPのダウンロードおよびインストールXAMPP とは、Web アプリケーションの開発環境（Apache + MySQL + PHP）をローカルに簡単に構築できる完全無料のパッケージです。 ダウンロードおよびインストール 基本的には以下のページから使用しているOSに応じてファイ... FFFTPのダウンロードおよびインストールFFFTPはWindows向けの無料のFTPクライアントソフトウェアです。日本語と相性がよくUIがわかりやすいので多少古いですが使うことも選択肢に入れていいかなと思います。 FTPとは「File Transfer Protocol」の略称で... FigmaのダウンロードおよびインストールFigmaは画像の編集などが行えるツールです。ダウンロードおよびインストールなどと言っていますが、ブラウザ上で使用することができて気軽に使えて高機能、基本無料という長所を持っています。 お金が有り余ってるならillustratorのほうがい... HTTrackのダウンロードおよびインストールサイト丸ごとダウンロードして保存しておけるソフトです。特に大学祭のhpは毎年変えてしまい、アクセスできなくなることが多いのでこれを使用して保存しておくと後々に参考にすることができます。 ただし外部の機能を使っているページなどを主に崩れてしま... 1.準備 1-1 必要な項目を考えるHPを作成する際にはどのような構造にするのかを先に考えておくことが肝要になります。まぁ先に考えておけば後から削ることは比較的容易なことが多いので 必要な要素を考える 持つべき機能は何か 基本的には大学祭のHPを作成することを前提に考えますが... 1-2 見た目の準備1-1では機能についての準備を話しましたが、こちらでは見た目の準備についてまとめていきます。 いろいろ調べてみる すでに作成されたものをたくさん見て学ぶことが最も良いのだと思います。何もないところから考え始めるよりも、すでにあるものを変えて... 2.画像で作成 2-1 大まかな配置を作成するここからは全体のデザインを考えていきます。とりあえず大まかに。 私はFigmaを使用していたのでそのスクリーンショットを使用します。 手を付ける たいていの場合何から手を付けるか迷うと思います。そういう時はとりあえず手を付けていろんなデザイ... 2-2 細かいデザインを作成作成したデザインから最終的なデザインを決定していきます。 デザインを選ぶ 今までに作成したデザインから実際に採用するデザインを考えていきます。まだグレースケールのままがいいのかなと思います。 配置を決める 特にトップページでどのように情報を... 3.実装 3-1 コーディング書くことほぼありません。頑張ってください。 とだけ書くことも無責任なので手順や気にすることを書いておきます。 コーディングの注意点 個人的にはヘッダー・フッターをまず作成し、その後にほかのことを作成していくことが多かったです。それぞれの注意... 3-2 テストと公開作成したものは必ずテスト環境で動作を確認してから実装するようにしましょう。ときどき動作が変わってしまう時があります。あとはファイルの参照ができていないことあったり...... テスト とはいえやることは単純です。XAMPPを使用して動作を確...
