Webサイト初心者がハマったこと＆参考にしたURL集

初心者レベル

Webサイトを作るのは初めて。
HTML、CSSはほとんど書いたことがない。
JavaScriptはAlexaスキル作成時にLambdaを使用するのに書いていた程度。

因みに

背景とか、作ったものとか。

Webサイトの作成に至った理由

第8回シンデレラガールズ総選挙で担当、堀裕子を応援するためです。
堀裕子は、総選挙で圏内に入ったことが第2回しかありませんし、第7回は中間で圏内入りするも最終結果は圏外と惜しい結果でした。
今までは投票しかしてこなかったのですが、今回は担当のために何らかの形で応援してみたいという思いで作成しました（ここまで早口）。

結果は圏外、ということでとても残念ですが、個人的に担当の応援に参加できた！という喜びは大きかったです。
初めてWebサイトを作ったのですが、簡単なものならすぐに作ることができるのだなとハードルが下がったのも大きかったです。
ということで、Webサイト初心者がハマったことを備忘録的に残しておきます。

作ったもの

ただのボタン連打ゲーです。

完成したWebサイトは正直、中学生でも作れるんじゃないかと思うレベルです。
ただ、ライブラリを使わず完全に一から作ったのでほーんこんな感じで動くんだなと基礎を学ぶにはよかったかなと思ってます。
もっと楽しいゲーム作れるようになりたい。

Webサイトをつくったときにハマったこと

Webサイトの公開方法が分からない

公開方法はGitHub pagesを選択しました。
publicなリポジトリにコードを管理して、リポジトリの設定を変更するだけでWebサイトが公開される。
サーバーいらずでとても楽。
GitHubを使ってWebサイトを公開するを参考にサクッと公開しました。

実現したいUI要素の名称が分からずググれない

Webデザインでよく使うUI要素の名称・用語一覧を見てました。

ボタンとか良いデザインを参考にしたい

• サルカワ
• copypet
• cman.jp (作成されたソースコードを自由に利用可)

を参考にさせていただきました。

id属性とclass属性の違いが分からない

id と class の違いと使い分け方の基本より
id属性は特性の要素を指定したい場合、class属性はstyleを当てたい場合に使うと良いようです。
class属性は1つの要素に複数付けられるので、style当てるのが大分楽になりました。早く知りたかった。

画像の上にボタンを重ねたい

私の場合は以下のように画像(スプーンとグーの手)の上にボタンを重ねたい場合、

サルカワ　画像の上におしゃれに文字やボタンをのせる方法（CSS）より
画像のdiv要素はposition: relative; を指定し、ボタンのdiv要素にposition: absolute; を指定することで、画像の上にボタンを重ねることができます。

画像比率を保ったまま拡大・縮小したい

画像を原寸サイズ以上に拡大せず画像比率を保ちたい場合、

img {
  max-width: 100%;
  height: auto;
}

と記載します。
max-width: 100%; は画像のwidthの最大値を親要素のwidthの100%の値にするということになります。
この時、height: auto; を指定しないと、heightは縮小されないため、画像比率を保てなくなります。
詳しくは画像の大きさを最適化する max-width:100%;を参照してください。
他のパターン等、詳しい内容はteratailの回答に記載があるので、参考にしてみてください。

ファビコンを付けたい

• ファビコンを作成するサイト
  https://ao-system.net/favicon/
• [HTML] ファビコンの設置について

を参考にさせていただきました。

別のJSファイルの関数を使いたい

簡単に書くならteratailの回答にあるように

        <script type="text/javascript" src="関数を定義しているファイル.js"></script>
        <script type="text/javascript" src="関数を呼び出したいファイル.js"></script>

で良いようです。（ファイルの読み込む順番は大事）
しかし、別のteratailの回答では、読み込む順番のズレの考慮やIEへの対応も入れるべきのようです（ここら辺は勉強不足ですみません）。
ここは、ググるときに意外と出てこなくて手間どった。

スマホでボタンを連打するとズームされてしまう

公開後にゲームをやってみた知人から「スマホからやるとズームされてボタンを連打しにくいけどこれ直せるの？」と言われました。
ググった結果、MDN Web Docs touch-actionより

html{
    touch-action: manipulation;
}

touch-actionプロパティでmanipulationを指定することでダブルタップでのズーム等の標準外の操作を無効にしてくれるようです。
none指定だとダブルタップでズームしてしまったのでmanipulationでないとダメでした。

他、作成する上で参考にしたURL

• display:none と visibility:hidden の違い
  =>地味に忘れる。
• ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字【2017/7/28追記】
  =>ちひろさんと豆まきのリザルト画面っぽくしたかったんですよ・・・参考にさせていただきました。

感想

画像の横並びを実現するのに、float指定をしてもdivを横並びにできなかったので諦めてtableに画像つめて並べました。
時間がなくリファクタリングが出来なかったので、後で見返すと酷い出来ですが戒めとして残しておこうかと思います。
classとidの違いなんかはコーディングを始める前に知っていると知らないとでコードの見やすさ、修正のしやすさが分かるのでコーディング前に知っておきたかったですね。最低限知っておかなければならない情報は集めておくといいですね。