previous arrowprevious arrow
next arrownext arrow
Shadow
Slider

上司命令で自社サイト作成したときのHTML,CSSの勉強方法

「プログラミングってなに?おいしいの?」

「プログラミングって難しそうだけど、スクールとか行くべき?お金かけられないし、自分で勉強できないのかな、、、」

「ビジネスマンとして自分に付加価値をつけたい!」

私がプログラミングと出会ったときはこんなことを考えていました。

現代は情報に溢れていて、調べればほとんどの知識を得ることができます。でも、知りたい情報にたどり着けないことってありませんか?

とくに初心者だと、言葉の意味など本当に細かい部分を理解するところから始まります。

疑問が解消できそうな情報に出会っても、導入部分はすでに省略されていたりして、「書かれていないそこが知りたかったよ、私は、、、」とインターネットの検索欄と何度もにらめっこすることになりがちです。

今回は、未経験から独学でプログラミングの習得に励んでいる私から、これから同じような壁にぶつかるであろう皆様へ愛のメッセージを送ります。(笑)

1歩は踏み出したけど、2歩目が なかなか、、、という人にぜひ読んでもらいたいです。

こんな人におすすめ

・プログラミングに興味を持ち始めた人

・独学でプログラミングを習得しようと思ってる人

・自身のスキルアップを考えている人

HTML、CSSの勉強を始めたきっかけは上司命令

私はプログラミングとは関係ない業種で会社員をしています。経費削減のために何でも自分でやってしまう上司の命令で、自社のwebサイトを一から作成するよう命じられたことが、私がプログラミング学習を始めたきっかけです。

命じられてから約1年くらいは、グダグダと見てみぬふりしていましたが、上司から進捗を尋ねられ、あたふたしながらひとまず情報収集から始めました。それから12ページで1つのwebサイトを形にするところまで来たのが現在の私です。

プログラミングって何?

プログラミングって何?それ覚えて何ができるの?どうなるの?って思いませんか?

義務教育でも2020年からプログラミングが必修化となるなど、最近よく聞く言葉にはなっていますが、まだまだ誰もが「あーはいはい、それな!」ってなる言葉ではないですよね。

まずはそんな方にプログラミングとは?の疑問にお答えしたいと思います。

プログラミングとは?

プログラミングとは、プログラムすることです。ではプログラムとは何なのかってことですが、コンピューターでやりたいことを実行するために、コンピューターが理解できる特別な言語を使って書いた「指示書」のようなものを指します。この指示書を書いていく作業をプログラミングと言います。

人間が「●●しなさい!」「△△しなさい!」と人間の言葉で話しかけたところで、コンピューターは「.....。」という感じでうんともすんとも言いません。コンピューターは、人間の話す言葉は理解できないのです。(話しかけると応答してくれるAppleのsiriやamazonのalexaのようなAIさんたちは今回置いといてくださいね。)

なので、人間が実行したいことを、コンピューターがわかるように指示することが必要となります。

コンピューターが理解できる特別な言語には、どんなものがあるのでしょうか。

この特別な言語をプログラミング言語と言いますが、これは本当にたくさんの種類があります。言語によって、できることも違うため、コンピューターで何を実行させたいかでプログラミングに使う言語は概ね決まっていきます。

例えば、私がおこなってきたwebサイトを作成するという目的を例に考えてみます。

webサイトを作成するのに使われる言語は、HTML・CSS・Javascriptの3種類が一般的です。普段何気なく見ているwebサイトですが、私たちがweb上で見れるようになるまでには、3種類もの言語を組合せて作られているんです。このように複数の言語を使うのは、その言語によってそれぞれできることが違うからです。

HTML

文章の構成を組んで指示する言語。タイトル・見出し・段落など、文章を読みやすくするために要素ごとに構成に変化をつける際、コンピューターに「これがタイトルだよ」とか「ここまでで1段落だよ」などと教える必要があるため、それを指示するため言語です。

CSS

HTMLで組んだ要素の配置を「もうちょっと上で、もうちょっと右に、、、」というふうに視覚的により見やすいものにするために、配置を調整したり、色を付けたり、線を引いたり・囲ったりなどの指示をするための言語です。

Javascript

実行したい処理を繰り返して自動化したり、アニメーションなどの動きを付けたり、ボタンをクリックするとある処理を実行したりと、やれることはとても多いです!(私も今は学習中の身ですので、すべてを把握しているわけではありませんが、、、)

IT業界では技術の進歩が常に行われているため、それに合わせてプログラミング言語にもトレンドがあるようです。プログラミング言語やコードの書き方など、少し前まではこの書き方でよかったのに、、、ということがよくあるとのことです。

その言語を使う人数が多ければ多いほど、言語の進化も激しく、今覚えたことも数年後にはまた変わっているかもしれないので、プログラミング学習は奥が深く、学びが終わることはありません!笑

プログラミング習得のメリット:人生を豊かにする

日本は、国全体でのプログラミング学習が、外国諸国よりも遅れていると言われています。私も仕事で必要に迫られるまで習得しようと思いませんでしたし、プログラミングが何かもほとんど知りませんでした。今はまだそういう方がほとんどだと思います。では、プログラミングができるとどんないいことがあるのでしょうか。

私たちの生活の中のほとんどがプログラムで制御されています。家電製品や車、スマホやPCの中にもありますし、アプリケーションもそうです。今話題のA Iもプログラムの一つです。実は私たちの生活には身近なもので、これがなくてはもう生活が回らなくなっています、便利すぎて。そうです、便利なんです。

プログラミングができるようになると便利にすることができます。手間がかからなくなり、有効に使える時間が増えます。その時間で他のことができます。

ノートに鉛筆で手計算で答えを求める作業を、コンピューターが代わりに自動でやってくれたら、その時間は新しい企画を考えることができますし、新しい知識を入れる時間にすることもできます。お茶を飲んだり、仲間と談笑したりしてリフレッシュタイムに使うことだってできます。とにかく人生が豊かになります。

大それたことをする必要はありません。普段の仕事や家事の中で、「これ何回も繰り返してるけどなんとか1回で済ませられないかな?」と思ったら、それはプログラミングを学ぶ絶好のチャンスです。

プログラミング習得のメリット : コロナ含めて今後のために 小学校でも必修になったり世間で色々と注目が集まっているプログラミング。 興味を持っている方は多いと思います。 でも、...

私のHTML独学方法

プログラミングを習得する方法は、大きく分けると2つ。

1つはプログラミングスクール(オンラインも含め)等に通って誰かに教えてもらう方法

もう1つは独学で頑張る方法です。

私は会社で経費もかけてくれませんでしたし、自分で費用を持ち出すこともできなかったので、独学で習得するしか選択肢がありませんでした。

では私がどのようにして、独学でプログラミング学習を進めていったのか、webサイト作成を例にしてその軌跡を紹介します。

私が学習した言語

・HTML
・CSS

初めはこの2つだけを使ってWebサイトを形にしました。現在、もっと便利に自由にいろんなことができるようにJavascriptを学習中です!

学習するために使ったもの

・IT用語の解説サイト
・テンプレート的にHTMLやCSSのコードを載せてくれているwebサイト
・現役エンジニアさんが公開しているyoutube動画

(studio21 https://www.youtube.com/watch?v=V-GiIzlAGJM

一番初めにこちらの動画を見て自分にもコードが書けるかも!と思えました。プログラミングへのハードルを下げてくれたきっかけになった動画です。)

(セイト先生のweb・I T塾 https://www.youtube.com/watch?v=QCjFPSO96RU

私は現在もこの方の動画を参考にしています。説明がとてもわかりやすく見やすいのでおすすめです。)

ではこれらを使いながら、どのようにして学習を進めていったのかを紹介します。

➀自分が作りたいもののイメージをぼやっと想像してみる

まず、どんなイメージのwebサイトにしたいかを考えて、それを実現するためにはどんなコードが必要なのかを探っていきました。そのイメージはなんでもいいです。例えば、「爽やかな雰囲気のサイト」とか、「かわいい雰囲気のサイト」とかそんな感じでOKです。

私は会社のWebサイトを作ることが目標だったので、爽やか且つ真面目なものをイメージしました。そうすると、なんとなく、色は青とか白とか緑とか、、、みたいにだんだん具体的なイメージが頭の中で浮かんできますよね。

➁先輩の仕事を見る

イメージをさらに具体化するために、すでにweb上に公開されているサイトの中から、自分のイメージに近いWebサイトを探します。いろんなwebサイトを見ていると、これかっこいい!とか、こんなふうにできたら素敵!などとときめくものと必ず出会います。

皆さんがよく耳にするような企業のWebサイトは、見やすくかっこよくきれいに作られているものが多いので、ときめきを見つけるにはいい材料になると思います。いろいろな技術がふんだんに使われていて、最終的に身につけるべき技術の目標が散りばめられています。

あとは、「かっこいいサイト」などと検索欄に入れてweb検索すると、かっこいいサイトのまとめ記事があったりして、見に行くべきサイトもすぐ見つかったりします。とにかく自分のイメージを検索欄にぶつけてみてください。(笑)

③webサイトの構成を考える

イメージを具体化したところで、自分のwebサイトの構成を決めていきます。

どんなページを用意するか考えます。これは自分がwebサイトでどのような情報を発信したいかである程度決まってくると思います。(ホーム、news、企業情報、アクセスetc…)

まずは1つ1つです。ホームを完成させることを目標にしましょう。メモでもいいので、ヘッダーやフッター、タイトルや見出しなど、どこに何を配置するか絵を描いてみると、今後コードを描いていく上で、道しるべとなります。

④HTMLの書き方を学ぶ

ここで、HTMLの書き方を紹介してくれているyoutube動画を参考にすると、一気にコードを書くイメージがつかめます。コードを書くためにはエディターというアプリケーションが必要なのですが、このエディターについても、どのアプリが良いかなどのおすすめや、ダウンロードの仕方まで教えてくれています。

以下は私のおすすめ動画です。

一番初めにこちらの動画を見て自分にもコードが書けるかも!と思えました。プログラミングのハードルを下げてくれたきっかけになった動画です。

私は現在もこの方の動画を参考にしています。説明がとてもわかりやすく見やすいのでおすすめです。

初見で動画を見るとわからない単語がたくさん出てきます。これはもう地道に覚えるしかありませんので、一個一個調べながら知識を積み上げていきましょう。

最初はわからなくても、動画の通りにやってみると見えてくるものがありますよ!

初心者の私は、コードを書き進めていくだけでは実際にブラウザでどのように表示されるかイメージすることが難しかったので、一行書くごとにブラウザを見に行ってということを繰り返していました。時間はかかりますが、コードの効果がどのように発揮されているのかを頭に叩き込む必要があるので、初めのうちは時間がかかってもこの作業をやった方がいいと思います。

⑤CSSの書き方を学ぶ

CSSはある程度、HTMLで骨組みを作ってから描き始めます。学習の仕方はHTMLの方法と同じです。

ここは水色にしたいけど、こっちは緑色にしたい、ここに写真を入れたらイメージしやすいかなとか、ここの文字は強調したいとか、ここは地図をいれたいなとか、、、コードを書きながらブラウザを小まめに見て、コードの効果を楽しんでください!自分の書いたものが反映されていくうちに、楽しい!という感覚になってきたらこっちのものです!

⑥webサイト用の無料テンプレートをダウンロードして、カスタマイズしてみる

一度でもコードを書いた経験を身につけると、書いてあることがわかってきます。無料で公開されているwebサイト用のテンプレートがたくさんありますので、それをダウンロードして、自分なりにカスタマイズしてみてください。自分の書いたことのないコードにも出会えますし、デザインの勉強にもなります。

とにかく座学で知識だけを頭に詰め込むよりも、実際に書いてみることが習得の近道だと思います。習うより慣れろ!です。

HTML独学の成果

まずはとにかく1つのwebサイトを形にしてみるという目標を掲げてやっていたわけですが、HTMLとCSSだけでなんとか目標を達成しました!自由度は低くなりますが、この2つの言語だけでのまあまあの見た目のものができたと自負しています。(笑)

未経験で独学で習得する必要があった私には、webサイト制作はとてもいい課題だったように思えます。1つのものを完成させたことで、プログラミングの入り口に立てた気がしますし、プログラムというもののハードルが低くなり、学習意欲を持ちやすくなったと感じています。

目標を達成した私ですが、すぐに新たな課題もあります。

Webサイトの情報を新しく更新したい時などは、コードの書き換えを行ってメンテナンスしていく必要があるのですが、今のものだと何回も同じ作業を繰り返したり、一から書き直したりと、手間もかかりミスも多くなるであろう代物です。同じ処理を何回も行う必要があるプログラムは、それを自動化したり、なるべく少ない書き換えで更新すべき箇所が更新されるようなものにしていきたいと考えています。そこで、次なる課題はJavaScriptの習得です!

プログラミング勉強は独学?スクール?

私の場合はプログラミングが本業ではないので、そこまで技術は求められませんし、自分のスキルの1つとして身につけられれば良かったので、費用対効果を考えた時に、スクールに通う選択肢はありませんでした。

独学で習得できればそこまでお金はかかりませんし、独学で身につけたものは向上心の賜物なので、忘れにくいと思います。私は1つのものを完成させるのに、失敗をたくさんして、時間も労力も費やしてとても遠回りしたと思います。でもこの経験は、私にとってとても有意義なものでした。すべて一から自分で行うので、必然と色々な仕組みも理解できます。

独学は私には合っていたと思います。ただし、前述したとおり、学習方法として効率は良くありませんので、合わない方もいると思います。

 

学習方法については、ご自身がプログラミング習得について、どの程度の技術力を目標とするかによって、決定するべきだと思います。その目標によってかけられる労力と時間と費用が変わってくるからです。

お金はかかりますが、スクール等を活用すると、学習の手順が確立されているため学びやすいでしょうし、迷いや悩みに対するサポートもあります。一定の学習成果が担保されているので、安心して学習していくことができます。もし、ある程度プログラミングの技術力を求めるのであれば、スクール等を活用すると基礎がしっかりと身につきますので、技術の精度が上がり、費用対効果も高いものになるのではないでしょうか。

どのような方法でも結果につながればよく、正解はありませんのでご自身の目標に合った方法で学んでいくのが一番です。何度も言いますが、プログラミングは奥が深いです。一度習得すればそれで終わりではなく、学び続ける必要がありますので、絶え間ない努力は必須です!

独学からプログラミングスクールで次のステップへプログラミングを独学でされている人は意外と多いです。 その理由も、企業から内定が出たから、入社後技術面が不安だから、転職をしようと...

まとめ

改めておさらいしますが、私はただのOLです。未経験の初心者です。本業は別にあって、でもプログラミングも少しかじりたいという人に読んでもらうとお役に立てるかなというつもりで書いています。

ひとくちにプログラミングと言っても、いろんな言語があり、できることは多岐に渡ります。どの言語を学んでも、無駄になることはありません。自分の業務+αで何かできることがあると、ビジネスパーソンとして自分の付加価値が高まり自身に繋がります。今いる場所でなくてはならない存在になることができます。必ずしもプロになる必要はなく、自分のスキルの1つとして学ぶことは大変有意義なことなのです。

この記事に辿り着いた方、あなたのやる気次第で未経験でも独学でもプログラミングを習得することはできます。一緒に頑張りましょう!

プログラミングは勉強だけで実務レベルにならない! 僕はこうしてレベルアップした! 「楽して稼ぎたい」という思いでプログラミングを勉強している方は多いと思います。 でも、ビジネスの世界はプログラミングスクー...
ABOUT ME
M.Y
M.Y
お菓子会社→保険会社に勤務。 経費削減のため上司の命令で、自社のwebサイトを一から作成するよう命じられたことが、プログラミング学習を始めたきっかけです。 S.Yさんの記事
関連している記事