VSCode よく使っていたVSCodeのショートカット&省略記法
F7、F8は撮影開始、停止のキーなので気にしないでください。
2025-04
VSCode CSS [CSS] vwと%
vwはview wideの頭文字で画面の横幅に対しての割合（百分率）で使用します。例：50vw 画面の横幅の半分の大きさ ％は親要素に対しての割合（百分率）で使用します。 言葉にするとこれだけですが、PC画面の場合多くの場合右端にスクロール...
3.実装 3-2 テストと公開
作成したものは必ずテスト環境で動作を確認してから実装するようにしましょう。ときどき動作が変わってしまう時があります。あとはファイルの参照ができていないことあったり...... テスト とはいえやることは単純です。XAMPPを使用して動作を確...
3.実装 3-1 コーディング
書くことほぼありません。頑張ってください。 とだけ書くことも無責任なので手順や気にすることを書いておきます。 コーディングの注意点 個人的にはヘッダー・フッターをまず作成し、その後にほかのことを作成していくことが多かったです。それぞれの注意...
2.画像で作成 2-2 細かいデザインを作成
作成したデザインから最終的なデザインを決定していきます。 デザインを選ぶ 今までに作成したデザインから実際に採用するデザインを考えていきます。まだグレースケールのままがいいのかなと思います。 配置を決める 特にトップページでどのように情報を...
2.画像で作成 2-1 大まかな配置を作成する
ここからは全体のデザインを考えていきます。とりあえず大まかに。 私はFigmaを使用していたのでそのスクリーンショットを使用します。 手を付ける たいていの場合何から手を付けるか迷うと思います。そういう時はとりあえず手を付けていろんなデザイ...
1.準備 1-2 見た目の準備
1-1では機能についての準備を話しましたが、こちらでは見た目の準備についてまとめていきます。 いろいろ調べてみる すでに作成されたものをたくさん見て学ぶことが最も良いのだと思います。何もないところから考え始めるよりも、すでにあるものを変えて...
1.準備 1-1 必要な項目を考える
HPを作成する際にはどのような構造にするのかを先に考えておくことが肝要になります。まぁ先に考えておけば後から削ることは比較的容易なことが多いので 必要な要素を考える 持つべき機能は何か 基本的には大学祭のHPを作成することを前提に考えますが...
0.開発環境の作成 HTTrackのダウンロードおよびインストール
サイト丸ごとダウンロードして保存しておけるソフトです。特に大学祭のhpは毎年変えてしまい、アクセスできなくなることが多いのでこれを使用して保存しておくと後々に参考にすることができます。 ただし外部の機能を使っているページなどを主に崩れてしま...
0.開発環境の作成 Figmaのダウンロードおよびインストール
Figmaは画像の編集などが行えるツールです。ダウンロードおよびインストールなどと言っていますが、ブラウザ上で使用することができて気軽に使えて高機能、基本無料という長所を持っています。 お金が有り余ってるならillustratorのほうがい...