});

Webライターの付加価値に繋がるだろうからHTMLとCSSを学んでみた話

おっすおっす。Webライターのもちころです。

 

最近どんどん暑くなってきましたね。

室内のエアコンと外の温度差で胃が痛くなったり、頭痛がしたりと結構大変な毎日です。

 

先日のブログにも書いたとおり、6月いっぱいはお休みをいただいており、自分を見つめ直したり今後のためのスキルアップのために色々と勉強をしています。

 

その中でも、今一番力を入れているのがHTMLとCSSです。

HTMLに関しては、仕事でちょこちょこ使うので(h2,h3,strongなど)馴染みがありましたが、CSSに関してはほとんど使うことがないので、最初の頃は結構わかんなすぎて辛かったですね…。

 

というわけで、今回は私がHTMLとCSSを学んでサンプルサイトを作るまでの話をしていきたいなと思います。

 

「とりあえず、HTMLとCSSを学びたいと思ってる」

という気軽な感じで参考にしてもらえればと思います。

 

ライターとしてさらにスキルアップするためにHTMLとCSSを学ぶ

私がHTMLとCSSを学びたいと思ったのは、単純に「ライターとして更に価値をあげたいから」というとても安直なもの。

 

2年半ライターとして活動してきましたが、経験談的にはHTMLとCSSに理解はあったほうが結構いいかもしれないと思った…というのもあります。

 

プロフィールに「HTMLとCSSの基本知識あります。WordPressでの執筆も可能です」とかくと、結構クライアントからも注目されて大きな案件を任せてもらうこともできたからです。

(あくまで経験談です)

 

また、Webサイトを作るというのにもともと興味があったから仕事の合間をぬってHTMLとCSSを学んでいきました。

 

最初は結構難しいですが、基礎を理解すればどんどん楽しくなってきたので、個人的には万々歳って感じです。

まだまだ知識が足りないところもありますが、頑張っていきたいなと思います。

 

HTMLとCSSは書籍と「プロゲート」で学んだ

よく「HTMLとCSSって、スクールで教えてもらわないといけないの?」と言う意見を聞きます。

ですが、個人的には独学でも全然問題ないんじゃないかなって感じです。

 

私の場合は、近くで購入した「スラスラわかるHTML&CSSのきほん(第2版)」という書籍と「プロゲート」というサイトを使って独学で学びました。

 

「スラスラわかるHTML&CSSのきほん(第2版)」は、画像つきで掲載をされているので初心者でも結構分かりやすい感じでまとめられています。

 

実習で使うサイトも、ネットからダウンロードできるので、書籍で学びたいという人ならこの本がオススメです。

(ちなみに、レスポンシブデザインにも対応しているのもポイント)

 

「書籍よりネットで学びたい派」という人にオススメなのが、「プロゲート」。

 

以前のブログで紹介しましたが、基本的には無料のプログラミング学習サイトです。

ただ、無料だと初級編しかできないので、HTMLとCSSをより深く学びたいなら有料版がオススメです。

 

有料と言っても、月額1,000円程度でHTML・CSSだけでなくJavaScriptやPHPなどの言語も全て学べるので、本格的にプログラミングを学びたいなら課金をしてみるといいでしょう。

 

私も、思い切って課金をしてなんとかサンプルサイトを一人で作れるようになりました。

 

書籍代とプロゲート代合わせても、3,000円程度なのでちょっとお金をかけて学びたい人はぜひ上の方法でやってみてはいかがでしょうか?

 

また、お金をかけなくてもHTMLやCSSは学ぶことは可能です。

わかりやすく解説してくれるサイトをご紹介しておきますので、よければ参考にしてみてください。

 

 

サンプルサイトを作る時に個人的にやったこと

書籍やプロゲートで一通りHTMLとCSSの基礎は学びましたが、やはり一から自分で作るとなると結構難しいです。

そんな時に、私はこのようなことをしていました。

 

他のサイトのソースコードを参考にする

一番無難なのが、他のサイトのソースコードを参考にしてみるというところ。

HTMLとCSSの基礎がある程度あれば、「ああ、ここはこういうタグを入れればいいんだな」「ああ、ヘッダーの高さってこれくらいなんだ」と理解することができます。

 

また、サイトそのものがどんな風にできているのかというのがざっくり分かるので、サンプルサイトを作る時の手助けになること間違いなし。

 

人のサイトなので、ソースコード丸パクリにするのはだめですが、はじめて自分のサイトを作る時にいくつかのサイトのソースコードを参考にした上でレイアウトを考えるのがオススメです。

 

あらかじめデザインレイアウトを決めておく

いきなりテキストエディタでソースコードを書こうと思っても、レイアウトが決まっていないのでなかなか手がつかず、そのまま放置してしまうことも…。

 

私もそういった経験があり、ソースコードを書くための対策としてあらかじめデザインレイアウトを決めておきました。

 

レイアウトといっても、割とざっくりとした感じです。

(画像)

 

ルーズリーフにボールペンでサイトのイメージデザインをかき、細かい部分をメモ書きしていく…そんな感じです。

最初の頃は、頭の中でデザインを考えて作るというのは難しいので、はじめてサイトを作る人はぜひこの方法を試してみてくださいね。

 

分からない部分はググりながら完成させる

あとはもうテキストエディタに書くのみ。

高さや幅、CSSのプロパティなど分からない部分に関してはネットでググって調べました。

 

意外とググれば情報はでてくるので、サイト制作中に迷ったらとりあえずググりましょう。

初歩的なことがわからなくなった場合は、再度書籍を見返したり、プロゲートでもう一回初級からチャレンジするなどすればOKです。

 

これらを踏んで、先日2つほどサイトを作ることができました。

(FTPソフトを用意していないのでまだアップはしていませんが…)

 

最初の頃は、英字のスペルをミスったり、ファイルパスのやり方が分からずうまくCSSが反映されなかったりと色々と苦労続きで挫折しかけましたが、焦らずにゆっくりやっていけば大丈夫です。

 

わからなくなったらもう一度戻ってアウトプットをする、とりあえず頑張って最後まで作ってみる。

これらを意識すれば、HTMLとCSSの基礎は理解できるんじゃないかなと思います。

 

まだまだ勉強中なとこ

ただ、まだ勉強をはじめて2ヶ月程度しか経っていないので、分からない部分や勉強中な部分も結構あります。

 

marginとpaddingの違い

一番は、marginとpaddingの違いです。

コレに関しては、今も全然分かってません。

 

YouTubeの動画や、ネットで調べてみましたが全く違いがわかりません。

とりあえず、やっていく中で必然的に違いが分かってくると思うので、やりながら学んでいきたいなと思います…。

 

レスポンシブデザインのやり方

あと苦労しているのが、レスポンシブデザイン。

スマホ用のレイアウトにする時に必要な知識ですが、これに関してもまだ全然身についていません。

 

プロゲートの上級編で紹介されていたと思うので、時間がある時にレスポンシブデザインをマスターしていきたいなと思います。

 

もっとオシャレなサイトデザインにする方法

これに関しても、試行錯誤しながら勉強しています。

一応基礎はある程度身についていると思うので、次はデザインを勉強していきたいです。

 

資金的に余裕があったら、PhotoshopやIllustratorも用意したいな…。

 

まとめ:何かしらの役に立つことは間違いないのでとりあえず頑張る

と、まあこんな感じで休み中勉強しつつ自分の時間をゆっくり過ごしています。

 

ライターとして仕事していく中で、HTMLの知識は必須になってきますし、場合によってはCSSの知識もあったほうが役に立つんじゃないかなと思います。

 

また、サイトを作るための基礎知識を学んでおけば、自分で一からデザインしたい時やWEB系の仕事につきたいときにもある程度役に立つはずです。

 

比較的取り組みやすく、勉強代もそこまで高くつかないのでWebライターとして新たな付加価値をつけるために頑張っていきたいなと思います。

  • もちころ
  • 就労経験全くなしの状態で、フリーのWebライターになっちゃった人。
    FP3級保持/HTMLとCSSで簡単なサイトは作れるようになった/メンタル心理カウンセラー勉強中/FP2級を今年中に取得したい