見出し画像

Webデザイン日記

リモートワークになって、仕事の時間が減った。
週平均50時間が20時間くらいになった。

よく、人間の脳が考えられるものごとのキャパは決まってるっていうけど、いますごく実感している。

以前の生活といえば、平日は毎日仕事のことばっかり考えて、休日はなにも考えたくなくなってごろごろするか、飲みにいくか、誰かと遊ぶか。

別に前までの生活がダメだったとは言わないけど、休みの日の遊びの予定もなにもなくなった今、わたしの興味の矛先はデザインに向き始めた。

他にもDIYや読書、映画鑑賞など、たくさんの興味の向かい先があるが、これは今までの生活では“必須”ではなく“時間あったらやりたいのになぁ”レベルのものごとたち。

わたしの興味レベル2軍がただいま急上昇中…
実はこんなにもやりたかったんだなってことに気づくことができてよかったな。


ということで、わたしはWebデザインについて勉強をはじめた。
ほんとうに右も左もわからないので、まずは本を買って練習してみることに。

なにを知ったかの記録として、noteを書いていく。

購入したのはこちら。
『これからはじめるHTML&CSSの本』
 千賀りこ 著

画像1

いろんなことを分かりやすく解説してくれるサイト、サルワカの中でおすすめされていた。

ひとつひとつの作業が、超初心者向けに書かれていてとてもわかりやすい。
( PCにCD-ROMを読みとる機能がついてなかったので練習画像は自分で用意)

HTMLとCSSについて、基礎の基礎を、サンプルページを作成しながら学んでいく。


【一通り本の練習をやってみて知ったこと】
・HTMLとは
 webページをつくる骨格をつくる言語
 タイトルを1番上に書く、他ページとリンクさせるなど

・CSSとは
 HTMLでつくられたページを装飾する言語
 文字や背景に色をつける、余白をつけるなど

・コードを書いていく作業はパズルみたいで楽しい!

・実際にみんなが見れるようにする(サーバにアップする)ためには、お金を払う必要がある。
 無料で使えるHP作成サイトもあるから、タダだと思ってた…

・コードは、「〈〇〇〉〜〈/〇〇〉」のように挟まれる形で書くことが多い。そうじゃないのもある。たくさんありすぎて、一回じゃ到底覚えられない。

・オンラインじゃなくても、作成した他のページとリンクさせることができる。

・Google mapや使用するフォントは、ネット上にコードが無料で公開されている。

・画像の指定は、PNGとかJPGとかがとても大事。

・コメント機能が便利

【できなかったこと】
・Google mapのスマホ対応ができなかった。
 表示させられるけど画面からはみ出すのと、表示されないけど枠は画面内に収まっている現象が起きた。

・〈h2〉の見出しの両側にアイコン的に画像を入れようとした(背景画像として)が、画像の超一部分が出てきたり、全く表示されなかったりして、この部分だけ諦めた…

・情報の種類分け〈section〉〈footer〉などの位置づけがいまいち理解できてない。

・classセレクタ、idセレクタのすみ分けがいまいち理解できてない。

・モバイル対応のコードを理解しきれてない。


一巡しただけじゃ、考え方と簡単なコードしか覚えられなかったので、もっと練習ページをつくってみようと思う。

ページのどこに、どんなふうに、どの文章を置いて…と考えるのがとても楽しそうだ。
DIYをするときに感じる感情と通ずるものがあって、自分の好きな作業がわかってきたな。

“なんのためにデザインの勉強をするか”
迷った時に立ち返るところはまだぼんやりしてるから、日々考えつつ過ごそうと思う。

けど、新しいことはじめるって楽しい〜!

この記事が気に入ったらサポートをしてみませんか?