読者です 読者をやめる 読者になる 読者になる

The Cat's Pajamas

旅と読書をこよなく愛する平成育ちの猫好きです。自分の好きなことだけをのんびりぽつぽつ紡いでいく趣味ブログを目指しています。

ブログタイトル

webデザイン超初心者が入門書1冊の独学1週間で、どこまでウェブサイトが作れるか試してみた

webデザインを学びたいという気持ち

私は大学では、美術やデザインとはあまり関係のない専攻を学んでいました。でも昔から美術が大好きで、母親がパソコン講師の仕事をしていたこともあり、小さなころからグラフィックデザインにはとても興味を抱いていました。

でもwebデザインってすごく難しそうなんですよね。

「HTML?CSS?なにそれ?」

という多くの疑問によって興味はあるものの「なんだか難しそう」と倦厭してしまい、今まで最初の一歩を踏み出せずにいました。

今回は、そんなwebデザイン超初心者の私が独学で一週間HTMLとCSSを学んだ感想と、制作したサイトを公開したいと思います。

一週間前の私のwebデザインスペック

まず最初に私自身のwebデザイン歴を簡単に記しておきます。

  • HTMLの知識ほぼゼロ
  • CSSの知識もほぼゼロ
  • はてなブログ歴1年
  • はてなブログのカスタマイズ経験が少々アリ

ハッキリ言って、1週間前までHTMLとCSSの違いもよくわかっていませんでした

はてなブログのカスタマイズ経験はありますが、ほとんどコピペOKのデザインを使用させてもらい、ちょこちょこと色を変えたり、線を太くしたり、といったデザイン変更をしたことがあるのみでした。

使用した教材

とにかく何もわからない状態からのスタート。色々と検索した結果、ウェブデザインにはHTMLとCSSの知識が欠かせないとわかりました。

レビューなどを参考にして今回、購入したのがこちら。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

このHTML5&CSS3レッスンブックに収録されている内容は、大変わかりやすく実践的で、私はすっかり夢中になってしまいました。この一週間、毎日定時直帰した後、どんどんと進めていき、5日間ほどで一冊を終えました。

この本はレッスンブックなので、本のとおりHTMLとCSSを打ち込むだけで、テンプレートのウェブページをつくることができます。

ちなみにこんな感じのウェブページをつくることができます。

f:id:eno1081:20170305160837j:plain

windowsのアクセサリになっている【メモ帳】を使うだけで、これだけちゃんとしたホームページをつくれるものなのだなと初心者の私にとっては小さな発見でした。

f:id:eno1081:20170305162713j:plain

でも、本音としては

なんか野暮ったい。

もっと自分の好みのデザインのホームページが作りたい(むらむら)。

新しい本を買って、さらに知識をつけようかとも考えましたが、少し踏みとどまる。

ここはストイックにいこうじゃないか。

また一冊、本を買い足してしまう前に、学んだ知識をきちんと活用して自分のオリジナルのホームページを作って、復習するべきだ、と。

ということで教本一冊を終えて迎えた週末2日間、寝食に及ぶすべての時間をかけて完成したホームページがこちら。

f:id:eno1081:20170305161408j:plain

にゃにゃーん!

猫ですね。はい、とにかく猫が好きなんです。

文章は一から考えるのが面倒でしたので、映画レビュー投稿アプリ『Filmarks』で自分が執筆した映画レビューをそのまま使用した映画レビューサイトにしました。

f:id:eno1081:20170305162019j:plain

非常に簡易的なサイトですので、コンテンツは数えるほどしかありませんが、いつもはてなブログばかりを眺めている自分としては、とても嬉しい出来栄えでした。

制作期間2日にしては、にゃかにゃかやるにゃないか(超自己満)!

モノクロを基調にし、スタイリッシュなデザインに仕上げたつもりです。

f:id:eno1081:20170305162402j:plain

本当に何の知識もないので、ひたすらHTML5&CSS3レッスンブックに載っていた知識を使いまわしただけですが、どうにか満足のいくデザインにできて安心しました。

一週間でHTMLとCSSを学んだ流れ

この記事を読んで、私と同じように全く独学で初心者の方がHTMLとCSSを勉強したい!とおもってくだされば、幸いです。参考までに、この1週間の流れをメモしておきます。

とにかく興味があるという方は、この本をやってみることを強くお勧めします。

ただしこの本では、スマートフォンからの閲覧デザインを整える方法は書かれていません。ですので、この本だけの学びでは、PC(もしくはタブレット)からの閲覧を想定したサイトしか作れないと考えてください。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 最後に:感想と今後の目標

まず最初の感想はやってよかったです。

webデザインは難しいというイメージを持っていましたが、何度も何度も繰り返すことで「このように打てば、こうなるはず」というのが、どんどんとイメージできるようになっています。

ただうまくいかないことも多かったです。どうしてうまくいくときと、いかないときがあるのかトライ&エラーの繰り返しでした。

そして何より超面倒臭かった、ほんまに。

というのも、はてなブログでは全く自分で打たなくていいものを、全部手打ちしなくてはいけません。

この1週間で1か月分の肩が凝ったように思います。

でも楽しかったです。

夢中になり過ぎて、夕食をとるのを二回くらい忘れました。

f:id:eno1081:20170305164854j:plain

こういう作業を行うことで、ある程度のテンプレートを賢く利用することの大切さを学ぶことができました。

加えて、一からhtmlとcssを自分で打つことにより、webデザインを敷居の高いものとして諦めるのではなく、挑戦することができるのだという自信をつけることができたように思います。

個人的にはCSS(スタイルシート)について学べたのが大きかったです。

f:id:eno1081:20170305165309j:plain

今後の目標は、新しいテキストを購入し、さらにデザイン性の高いホームページをつくれるようになることです。

早速Amazonで、以下のテキストを購入しました。今回私が使用したテキストも同じエビスコムさんのものですので、とても楽しみにしています。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

このテキストをやった後、動きのあるホームページをつくれるようになるというJava Scriptについても学びたいです。あとWord Pressできちんとサイトを制作し、スマホとレスポンシブルのデザインにしていきたいと思います。

今回制作したサイトは更新する今後予定はありませんが、fc2の無料ホームページをお借りして、インターネット上に公開しています。

拙い素人のホームページですが、今はやりの『ラ・ラ・ランド』の感想などを書いているので、映画に興味がある方は、ぜひお立ち寄りいただけると嬉しいです。

Let Me See Movies with the Cat's Eyes

(上のリンクから入れます。ただしスマートフォンからのアクセスですと、崩れたデザインしか見ることができませんので、ご了承ください)。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

しかし毎日の楽しみが増えましたね。

一冊しかやっていないので、これからまだまだ知らない知識があると思うと、ワクワクが止まりません。

やっぱり何事も、まずはやってみるが吉!

当記事にたどり着いた方で、同じようにwebデザインに興味があるものの、自分には無理だと諦めている方には、ぜひ挑戦してほしいと思います。私もまだまだ色々と挑戦する予定ですので、ぜひこのブログで経過報告をしていけたらと思います。

最後まで読んでくださり、ありがとうございました!

www.nekopajamas.net