自作プロフィールとポートフォリオ

コーディング初心者のwebライターが勉強開始!HTMLやCSSとは?

コーディング 初心者 HTML CSS ドットインストール わかりやすく パソコンと本 ボーダーの服
この記事は約8分で読めます。

コーディングというのはプログラミングを覚え始める初心者にとって、都合がいいジャンルです。

それはブログなど触れ合う機会が多い部分になるから。言い方を変えるとHTMLやCSSであり、この勉強がしっかりできていると、仕事にもつながりますよ。

全然知識がない人のためにも、わかりやすく紹介しますね。

僕はwebライターをしており、なんとかフリーランスで生活できているのですが、それだけでは不安になってしまいました。

 

そこでプログラミングをしたいと前々から思っていたのですが、始めるタイミングがなかなか見つかりませんでした。

 

ところがドットインストールという存在を知り、勉強を始めることにしたんです。

 

ドットインストールとは、無料である程度のプログラミングの知識を教えてくれるサイト。

動画を使って丁寧に押してくれるので、仕事の空き時間で勉強ができると、初めてみることにしました。

メガネさん
メガネさん

ちなみにTwitterでやさしい川村さんが、中身について教えてくれました。

 

どうやら今勉強しているものは、コーディングというものだったようです。

 

 

スポンサーリンク

コーディングってそもそも何?プログラミングとの違いとは?

コーディング 初心者 HTML CSS ドットインストール わかりやすく 文字列がカラフル 黒画面

そもそもプログラミングとコーディングって何?という話ですが、僕自身本当に知識がない人間でしたが、川村さんの説明で納得できました。

 

どうやらプログラミングの中でも、さまざまなジャンルに分かれているようで、その中にコーディングという作業があるようです。

メガネさん
メガネさん

僕のような初心者はプログラミングかっけー!

としか思っていないので、本当にわかりやすい説明をしてくれてありがとう!

 

コーディングとはプログラム言語で記述すること

コーディングと聞いてもピンと来ない人も多いでしょう。

そもそも日常会話でこの会話が出てこないわけですから、プログラミング経験者でないと、どんなものかさえわかりませんよね。

 

もともとプログラミングとは、プログラムを作り出すことを、そう呼びます。

そしてそのプログラムを入力するときに使うのがコーディング。

 

サイト作成の際にもよく使う方法で、プログラミング専用の言語を入力する方法を指します。

メガネさん
メガネさん

「料理をする」というのと、「包丁で切る」というのと同じ理屈だね!

 

プログラミング作業の中の一部がコーディングなわけだ!

 

プログラミングの一部だからHTMLやCSSは必要

コーディングをする場合でも言語を使い分ける必要があり、その中にHTMLやCSSといわれる文字列が存在します。

 

ちなみに小学校でプログラミングの授業があり、ロボットなどを捜査しているシーンがありますが、それとは別物だと思ってくださいね。

 

基本的にHTMLやCSSはサイト設計に必要なもので、プログラムの設計とは別ジャンル!

よくデザインをしていく際に、コーディングが使われるというわけです。

 

  1. コーディングとはプログラムを入力するときに使う方法
  2. プログラミングとはプログラム作成の全体
  3. コーディングはサイトなどの全体のデザインに関わる工程

 

ブログやサイトはHTMLとCSSがないと成り立たない

コーディング 初心者 HTML CSS ドットインストール わかりやすく 赤い丸に白文字 黒画面

プログラミングとコーディングには、しっかりとした違いがあるのがわかったでしょう。

では次にその中にあるHTMLやCSSについて紹介します。

 

この2種類の言語はコーディングで仕事を受ける際に、かなり使いこんでいくジャンルになるので、必ず覚えておいてくださいね。

メガネさん
メガネさん

どっちもブログをイジるのにかなり目にしている名前だな。なんとなくだけどわかるよ!

 

HTMLとはハイパーテキストマークアップの略

HTMLとはサイト上のほとんどが利用している記述法で、言い方を変えてみると言語でいう英語みたいなものですね。

 

ブラウザによって違うでしょうが、右クリックしてソースを表示という部分をクリックすると、< >というような表記があると思います。

 

それがHTMLといわれる表記法です。

ドットインストールでは構造的文章と紹介していましたが、この記述があることでサイト上に文章やリンクなど、サイトの骨組みができあがります。

 

ちなみに< >内には英語単語が並んでいて、その単語には意味もしっかりあり、その組み合わせでサイト作成が可能です。

 

その具体的なタグの意味などは、また別に記事で紹介していきますね。

そしてHTMLにはバージョンも存在しており、今ではHTML5が主流になっているようです。

ブラウザによってはこれに対応していないと、文字化けなど見にくいサイトになってしまうので注意してください。

 

CSSとはカスケーティングスタイルシートの略

CSSとは構造ではなく、文章などの見た目をきれいに整える文字列になります。

 

CSSは上記のHTMLとセットで使わないと意味ない表記法になるので、最初はHTMLを覚えてからCSSの勉強をしたほうがいいようです。

 

文字の色などはもちろんのこと、画像の大きさや場所の移動などもできます。

ちなみにCSSは2.1が主流になっていますが、3.0というのも実装しているところも増えているようです。

 

それぞれ表記の方法に違いますが、バージョンに追いついていないブラウザがあるので、とりあえず2.1から覚えておくと間違いありません。

 

  1. HTMLはサイトの骨組みとなる表記法でかなり重要
  2. CSSはサイトの彩りなどの装飾をメインとして使う方法
  3. HTMLの表記が間違っているとエラーなどの正しく表示されない

 

初心者だからこそHTMLとCSSは学んでおくべき理由

コーディング 初心者 HTML CSS ドットインストール わかりやすく いい笑顔 淡い色の写真

コーディングをしていくにはHTMLとCSSをしっかり覚えていると、じつはすぐに仕事として活用できるようになるからです。

 

じつは僕自身もwebライターとして働く前は、ライティングとしての知識を、すべての範囲知っておかないといけないと思っていました。

 

ところがいきなり参入しても仕事が見つかったのですが、プログラミングの中のコーディングも、そのような感じですぐに参入できるジャンルだからです。

メガネさん
メガネさん

なぜコーディングが仕事としてすぐ参入できるのか見てみましょう!

 

WordPressだとコーディングだけでいいから

このサイトはWordpressというツールを使ってサイトを作っているのですが、PHPなどのプログラムはできあがっています。

 

初心者でも気軽にブログが作られるのが特徴ですね。

ちなみに僕がブログを作った時点で、プログラミングの知識が全然ないのに、ブログ運営ができているのはそのためでもあります。

つまりWordPressを使ってサイト作成したクライアント様がいた場合、コーディングのみの依頼を出しているはずです。

 

僕がwebライターの仕事を探すときに使った、クラウドワークスだとそんな依頼が意外に多くあり、単価を気にしないのならすぐに実践ができるでしょう。

 

コーディングの技術は副業向きだと思っていいわけです。

ところがドットインストールで習ったことが、すべて依頼で活かせられるわけでないので、失敗する可能性があるのも事実。

迷惑がかからないように、基本はしっかり勉強してからがいいでしょう。

 

コーディングはアプリ製作などでも活用するから

サイト作成の話をしましたが、じつはコーディングというのはアプリ製作でも活かされる技術でもあります。

 

そもそもデザイン系の記述方式のため、アプリ製作のプログラミングにも活かすことができるわけです。

 

もちろんサイト作成の記述法とは違うので、そのまま活かすことはできませんが、いちから覚える人に比べて楽なのは間違いないでしょうね。

 

  1. コーディングは依頼によったらすぐに実践できるから
  2. アプリを作るプログラミングでも使う技術で応用が利く

 

webライターの他にコーディングの仕事が受けられると安心

コーディング 初心者 HTML CSS ドットインストール わかりやすく 白黒写真 ノートパソコンとメモとペン

コーディングとはデザイン系に関わる記述方式であり、プログラミングの一部を指します。

サイト制作にも関係があり、ブログをしている人にとっても関係が深いジャンルです。

 

webライターをしているとインターネットに詳しくないクライアント様もいて、Wordpressだと少し教えてあげる部分もあったので、コーディングで仕事もとれると実感しました。

 

ひとつの仕事ばかりして極めるのもいいですが、その仕事で失敗すると困ってしまうので、フリーランスにとってリスクヘッジは重要です。

webライターをしている人は、コーディングも勉強していて損はありませんよ。

メガネさん
メガネさん

コーディングを物にするのは、ある動画では半年頑張れば基礎ができると言っていました。

 

少し頑張れば物になるかもしれませんよ。

 

コーディング
スポンサーリンク

この記事を書いたのは…

メガネさん

元美容師webライター

美容師⇒手荒れ⇒Webライターと、波乱万丈な人生を楽しみながらブログ発信をしています。

youtubeチャンネル


メガネ通信 | 元美容師の雑記ブログ