新参者、よろしくお願いします。
初めまして、今回記事を書かせていただく「じゅのす」です。
始めに僕のプログラミング経験について。
ほぼ０に等しいです。笑
以前に少しだけ"Python"っていうプログラミング言語を学んでいたのですが、別にそれを使って何か出来るというわけでもなく、もうほとんど覚えていません。
じゃあ今回記事に何を書くのって？
こんな知識を持たない僕がこれから2週間かけて"Webページ"づくりに挑戦します！（2019年12月20日にこの記事は投稿予定。今日は12月7日。間に合ってるかな・・・。）
プログラミングに慣れている方からすればそんなの簡単だよって思うかもしれません。でも実際、今の僕にとっては高い壁なんです。以前にも自分の考えを外の世界に飛ばしたいなと思ったのですが、ハードルが高く感じて諦めちゃいました。きっと同じ思い、悩みを持つ人はたくさんいるはずです。
そんなこんなでこれから毎日少しずつ調べ、勉強し、実行し、この記事とWebページを仕上げていきます！僕は有言実行する男です。きっといいWebページが出来上がり、みなさんが今読んでくださっている頃にはいいものができあがっているはずです！
ちなみに今回作るWebページの内容は、「イベント用ホームページ」です。
それではよろしくお願いします。
さぁ、始めよう。
とは思いながらも、何から始めればいいのか...。いろいろ調べてみたところ、Webページ作成において最も使われている（必要とされている）プログラミング言語は"HTML"と"CSS"ということが分かりました。
初心者なりにこの2つの言語の特徴を調べてみました。簡単にまとめると、"HTML"は文字を、"CSS"はそこに色や配置のバリエーションを加えてくれるようです。
う～んまだまだ分からないことが多い、、、とりあえず触れてみます！
勉強開始。
僕は HTML と CSS を学習するのに Progate のレッスンを使わせて頂くことにしました。周囲の子が使っていて、評判良かったので！（宣伝ではありませんよー。）Progate には様々な言語の学習プログラムがありますが、その中の HTML & CSS コースを進めていきます。
ひとまず、基本的なHPの構成方法、色や配置の設定方法まで学んだところで実際に試作することにしました！
んん？学んだコードはどこに書いたらいいの？
せっかく学んだコードをどこに書けばページが生成されるのか分からん・・・。ここも色々と調べてみたところ、自分でプログラミングに取り組むには開発環境の設定（少しだけ装備を整えるだけです。難しくないよ。）が必要でした。
その準備の1つであり、先ほどのコードの悩みを解消してくれるのが「テキストエディタ」です。
簡単に言えば、テキストを編集するツールです。Webページってたくさーーーんの文字（テキスト）で構築されています。それらを書き記す媒体としてテキストエディタが存在します。
数あるテキストエディタの中で、私は「Atom」を使うことにしました。口コミでもだいぶ評判の高いソフトです。（ここも宣伝じゃないですよー。）インストールも二手間ぐらいであっさり終わりました。
それでは実際にHTMLとCSSのコードを書いていきます！
実践
どこまでこの記事に詳細を書こうか迷いましたが1個1個コードを記すのも量が膨大になるので、今回は大まかな作成手順と僕がつまづいた点を書いていきます。
HPの大まかな構成を先に述べておくと、「head」と「body」があります。詳細は下でそれぞれ書きます！
まずは「head」部分の作成。
これはホームページの基本情報を設定する場所です。実際にHPを開いたときに見える要素はありませんが、ここを丁寧に書くことでHP内での文字化けの防止や、ネットで検索結果に引っかかるようになります。この辺の作業はHTMLだけで終わります。
次に「body」部分の作成。
ここがHPで実際に見る部分になります。今回作成するHPの「body」は「header」、「main」、「footer」の3部構成にすることにしました。
「header」はページの1番上のスペースを構築してくれます。HPに飛ぶと上の方にページタイトルやログインボタン、色々と目次のようにメニューが設定されている印象がありませんか？それです！
今回はそこにタイトルだけ設置しました。ここはHTMLで行います。そしてそこに色付けやサイズ変更をCSSで加えてアレンジします。
「main」はページの大部分を占める主役の部分なので、1番アレンジしがいのある場所です。
ここにはイベント情報、過去のイベント実績といった情報を盛り込みました。CSSを用いればこれらもただの箇条書きではなく、色付けしたり、グループ分けしたり、フォントを変えてみたりと自由にオシャレできます。文字で出来ているくせになんて素敵なビジュアルを作れるのだろう、と少し感動しました。笑
だいぶHPらしくなってきました。
最後に「footer」です。HPの1番下に行くと小さな文字で細かな情報がだぁーっと載っているイメージありません？それです！
ここにはイベントの運営者情報やお問い合わせといったフォームを設けました。しかし、今回作成するHPの場合はそこまでここに盛り込む内容はありませんでした。
改めてHPの構成を整理すると、
◯head
◯body
・header
・main
・footer
といった形です。
headとbodyが2本柱、その中にheader、main、footerがある感じです。
本当はここにそのHPを載せたかったのですが、Webサーバーの準備までは間に合わなかったので公開までは行きませんでした。泣
が、約2週間の学習でHPの作成はマスターできた気がします。つまづいた点もありましたが、色々と分かったことも多く、勉強になりました。意外とやる気になれば簡単に出来るものですね！
もっともっとプログラミングスキル高められるよう精進する予定です！良かったらこれを読んでくれているあなたも一緒に！それでは！
読んでくださりありがとうございました。