
ようこそ“もめん”です。
ドットインストールというオンライン学習サイトでプログラミングを学び、独学でコツコツと勉強をすすめています。
ドットインストールのレッスン「実践!ECサイトを模写しよう」を学習したので、復習を兼ねて自分のサイトを作成してみました。
今回作成したサイトは、自分でデザインして作成した「きめこみパッチワーク作品」の紹介サイトです。
せっかくなので、作成したサイトをGitHub Pagesで公開しました。
公開したサイトを紹介します。
公開したサイトは
公開したサイトのURLは、https://momenblog.github.io/mysite/です。
どうぞクリックしてご覧ください。
今回は、自分でデザインして作成したオリジナルデザインの「きめこみパッチワーク作品」を紹介したいと考え、作品の紹介サイトを作ってみました。
サイトで紹介しているきめこみ作品は全部で7作品です。
きめこみ作品の画像や作品タイトルをクリックすると、作品の詳細説明ページに移ります。
詳細ページでは、作品タイトル、作品サイズ、作品をつくった理由を簡単にまとめました。
さらに作品の作り方など詳しく知りたい場合は、作品についてかいたブログ記事を読んでいただけるように、詳細ページの下部でブログを紹介しています。
ブログタイトルをクリックしていただければブログ記事を別タブで読めるようにしました。
学んだことと改善点

今回のレッスンで、トップページをサイトの入り口として、下層ページに飛べるようにする方法を学びました。
上の画像のような構成でサイトを作ることができます。
この方法を応用すれば、料理レシピの紹介サイトや簡単なブログも作成できそうです。
また、余白のとり方の考え方や余白のつけ方はほぼ理解できました。
ただ、スマホでみてみるとレイアウトが崩れてしまい、余白も考えていたとおりには再現できていません。
何故なのか、いろいろと試してみましたが思うようにいきません。
スマホでもきれいなレイアウトがつくれるようになることを今後の課題として勉強を続けていきたいと思います。
今後は
動きのあるページをつくってみたいと思っています。
アニメーション的な要素をとりいれて、おもしろいページができないかと漠然とですが考えています。
そして、いつかお洒落で楽しいサイトを作ってみたいなぁ…と夢みています。
全体の色合いも統一感があって、洗練されたデザインのサイトは憧れですね。
そんなサイトを自分がかいたコードで表現できたら最高です。
そうなるには、何よりもっともっともっとコードを書きこんでいくことが必要だと感じます。
勉強あるのみですね。
まとめ:69歳のおばさんが独学でコードを書いてGitHubでサイトを公開しました
本日は、独学でプログラミングを勉強している69歳のおばあさんがGitHubに公開したサイトを紹介させていただきました。
今回作成したサイトは、レッスンの模写に近いですが、画像を用意するところから考えながら作成しました。
出来上がりには、ほぼほぼ満足。
また「きめこみパッチワーク作品」ができあがったら、今回作成したサイトに追加していき、きめこみパッチワーク作品を紹介していこうと思います。
本日も最後までおつき合いくださいましてありがとうございました。
次回もお楽しみに♪