メニュー作成お役立ちサイト
webサイトのハンバーガーメニューなど、
メニュー作成で役立つサイトを、ご紹介します。
ほとんどがコードのコピペ（コピー&ペースト）で、メニューが作れるサイトを、ご紹介します。
メニュー - copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
まず1つ目が、こちらのサイトです。
もう1つ、ご紹介します。
グローバルナビゲーション | 動くWebデザインアイディア帳
こちらのサイトです。
ただし、注意事項として
【コード使用に関しての注意とお願い】 動くWebデザインアイデア帳のサイトの一般公開は、「2024年8月末まで」となります。 2024年9月からは書籍購入者限定で閲覧できる形に変更となります。（電子書籍含む）
という注意書きがあります。
なので、2024年9月からも、このサイトを継続利用したい方は、
こちらの書籍の購入を検討してみてください。
こういった、お役立ちサイトを利用すれば、
メニュー作成を時短できたり、いろいろなメニューがあるので参考にもなると思います。
よろしければリンク先を、ご覧ください。
では！
WEBサイトを持つメリットについて考えてみた。
WEBサイトを持つメリットについて考えてみました。
WEBサイトを持つと、自己紹介で役立つと思います。
どういう人が対象かと言うと、
個人事業主、学生、何かの集まり（サークル、部活動、ボランティアなど）
などなど、
私が思い浮かべたところ、こんな感じですかね。
今の時代、SNSがあるので、WEBサイトがなくても情報発信はできると思います。
ただ、その場合、情報発信の対象者は
SNSの利用者限定で、ということになると思います。
WEBサイトであればネット環境のある人であればいいので、SNSより対象範囲は広いです。
それとWEBサイトであれば個性を出すこともできると思います。
オリジナルサイトをつくれば、
デザインを工夫したり載せる情報を吟味すれば、
個性を伝えることもできるのではないかと思います。
紙媒体のポスターだとかチラシで自己紹介をする場合、紙面の関係で載せられる情報は限られると思います。
その点、WEBサイトならページ数を増やしたりと、紙媒体とは違い、そういった制限はないです。
名刺にWEBサイトのQRコードを載せて相手に渡せば、スマートな自己紹介ができると思います。
ポスター、チラシにWEBサイトのQRコードを載せておけば、紙面で表現できない多くの情報を載せることもできると思います。
このブログはWEB制作、初心者（素人）を対象としています。
無料でWEBサイトの運営する方法を載せています。
自分のWEBサイトがほしいと思われましたら、
私のブログを気軽に、のぞいてみて下さい。
では！
簡易的な、お問い合わせフォームの作り方
企業などのWEBサイトを閲覧していると
お問い合わせページがあり、
当たり前のように、お問い合わせフォームがあると思います。
参考にキューピーさんの、お問い合わせページを載せます。
こういった、お問い合わせフォームなのですが、
WEB制作、初心者がつくるには難しいと思います。
なぜかと言うと、
高度な技術が求められます。
それとセキュリティの観点からも、
個人情報を扱うことになるので、
個人的には手を出さない方がいいと思います。
ただ、私は自分のつくったWEBサイトに、
お問い合わせページがあります。
以下にリンクを載せます。
このお問い合わせページで使用しているのは、
Googleフォームです。
Googleフォームはアンケートを取るのに利用されたりするそうです。
Googleフォームを使えば、
お問い合わせフォームの代用ができます。
しかも無料で利用できます。
Googleフォームで簡易的なお問い合わせフォームを簡単につくれます。
Googleフォームで、お問い合わせフォームをつくる方法が載っているサイトを、ご紹介します。
Googleフォームでお問い合わせフォームを作成するには？手順から自動返信の設定まで解説 | トライコーンラボ
もし、お問い合わせフォームが必要という方は、こちらのサイトを参考にしてみて下さい。
では！
WEB制作、初心者の学習ステップ
WEB制作、初心者の学習ステップを
私なりに以下に載せます。
①WEBデザインの本で学習する
⬇
②オリジナルサイトづくり ※仮想のサイトでも可 ※サイトのフレームを、大まかでもいいので、描く
⬇
③オリジナルサイトに使う画像の用意 ※画像素材サイトなどを利用する
⬇
④画像編集とWEBサイト用に画像の圧縮をする
⬇
⑤コーディング（コードを打つ作業）をする ※コードのコピペ集を参考にして表現の幅を広げながら行う
⬇
⑥Chromeブラウザの検証ツールで検証を繰り返して、完成形へ
⬇
⑦サーバーにアップロードする前の準備 ・OGPの設定 ・Googleアナリティクスの導入
⬇
⑧オリジナルサイトをサーバーにアップロードする ※ネットで調べて、やり方がわからない場合は本を参考にする
①から⑧までの工程を通して、ある程度、それなりのWEBサイトができるようになると思います。
ただ、自分が納得しないようであれば、
試行錯誤して、オリジナルサイトの修正を繰り返して下さい。
そういった作業が実力の向上につながると思います。
実際に手を動かすのが非常に重要だと思います。
繰り返しているうちに自然と技術が身についてくると思います。
①webデザインの本で学習する
についてですが、オススメの本は
こちらです。
よろしければ購入の検討をしてみて下さい。
③オリジナルサイトに使う画像の用意 ※画像素材サイトなどを利用する
④画像編集とwebサイト用に画像の圧縮をする
についてですが、
WEBサイト用の画像について - WEB制作、初心者お役立ちブログ
【無料】画像・写真編集&加工アプリおすすめ10選【2023年版】 - WEB制作、初心者お役立ちブログ
こちらの記事を参考にしてみて下さい。
⑤コーディング（コードを打つ作業）をする ※コードのコピペ集を参考にして表現の幅を広げながら行う
についてですが、
WEB制作コード、コピペ集まとめ - WEB制作、初心者お役立ちブログ
こちらの記事を参考にしてみて下さい。
⑥Chromeブラウザの検証ツールで検証を繰り返して、完成形へ
についてですが、
Chromeブラウザの検証機能の使い方 - WEB制作、初心者お役立ちブログ
こちらの記事を参考にしてみて下さい。
⑦サーバーにアップロードする前の準備 ・OGPの設定 ・Googleアナリティクスの導入
についてですが、
WEBサイトを公開するならOGPを設定 - WEB制作、初心者お役立ちブログ
WEBサイトでアクセス数などを知るためのGoogleアナリティクスについて - WEB制作、初心者お役立ちブログ
こちらの記事を参考にしてみて下さい。
⑧オリジナルサイトをサーバーにアップロードする ※ネットで調べて、やり方がわからない場合は本を参考にする
についてですが、
趣味でつくったWEBサイト、実例 - WEB制作、初心者お役立ちブログ
こちらの記事を参考にしてみて下さい。
楽しみながら取り組むことがベストだと思います。
では！
cssで中央寄せに悩んだら？
Chromeブラウザの検証機能の使い方
WEBデザインのコーディング（コードを打つ作業）を一発で完成させられることは、まずあり得ないと思います。
なので、Chromeブラウザの検証機能（デベロッパーツール）を使って、
何度も検証を繰り返し完成したWEBサイトに近づけていきます。
Chromeブラウザの検証機能（デベロッパーツール）の使い方について、
わかりやすく解説されているサイトを紹介します。
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
こちらのサルワカさんのサイトに、
Chromeブラウザの検証機能（デベロッパーツール）の使い方が、わかりやすく解説されています。
最初はデベロッパーツールの使い方で手間取ることもあると思います。
ただ、何度も繰り返しているうちに自然と慣れてくると思います。
では！
