BLOG

こんにちは!すーちゃんです٩( ‘ω’ )و
さて、今回は全く、全く、全くHTMLやらCSSに関わりがないすーちゃんがHTMLを書けるようになるまでのお話をしたいと思います。
なお、未だに勉強中なので更新はまちまちになると思います。

超入門ならざる、超超入門編です。

なお、繰り返しますが今も勉強中の身なので、会社BLOGを復習の場かつ、こんなとこでつまづいてるんだぜ、どうしよう。
という生のお声も配信できたらと思います。そして、可能な限りどう解決したかも書ければいいなと考えています。
誰に利益があるかはわかりませんが、少なくとも私には利益があることはわかります。はい٩( ‘ω’ )و
とにもかくにも。

「え、えいち、てぃー、えむ、える? あ、あれ?パソコンにつける機器かなんか?」

ぐらいの感覚からHTMLを書くことになった人に向けてエールを。

では恒例の、そもそも○○ってなんですか?のコーナー✌︎(‘ω’✌︎ )
毎度ながらざざっと説明させていただきます。

HTMLってなんですか。

超ざっくりいうと、Webページを作る際にパソコンに「あ、こういう文章(テキスト)ね」と理解させるためのツール…だとすーちゃんは認識しました。

もっと詳しく説明するとHTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。
「Hyper Text」というのは言葉のまま、普通のテキストの役割を超えたハイパーなテキストであることをいい、ここで重要なのが「ハイパーリンク」という機能です。この機能は、みなさんの知る、「リンク」のことを指します。WebサイトはたくさんのWebページ同士(テキストページ)が集まって作り上げられているため、このようにリンクでいろいろなページに行き来する機能は必要不可欠なものとなってきます。
また、「Markup」とは「文章に目印をつける」という意味を持ち、< > という形で文章をマークアップすることで文書のなかで特定の部分に意味を持たせ、全体を構造化していきます。
文章をマークすることでPCが「これは見出し」「これは文字段落」「これは画像」「これはリンクね」と理解してWebページに反映させてくれます。

HTMLの役割についてはわかったんだけど、でもどうすればいいんだよお( ; ; )
どうすればHTMLって書けるんだよお( ; ; )
と思いますよね。
超入門であれば、ここで「手を動かしながら理解していきましょう」というのが大筋で、確かにその通りなのですが。
すーちゃんのようにHTMLの「H」もわからず、ましてや書き方とか以前に「エンジニアの人がPCの画面上に出してる、あの英語がいっぱい並んだ黒いページってなんなんだ」って感じでしたので…
そこから理解していきましょう。

黒い画面の正体はテキストエディタというものです。
先ほど説明したようにHTMLの中身はテキストデータになるので、そのデータを作成・編集・保存するためのソフトウェアが、テキストエディタといいます。
「え?テキストエディタってやつ使わないとHTMLって書けないの?」って思う方もいるでしょう…。なんと、Windowsには「メモ帳」、Macには「テキストエディット」というテキストエディタが標準でついているため、そちらを利用してHTMLを書くことができます。
しかし!!なぜ!!エンジニアさんはあの黒い画面、テキストエディタを使っているのか!? と、いうと。
文字を入力する時間を短縮。見やすくする。専門性に長ける便利機能がある。というメリットがあるからだそうです。

また、標準でついているテキストエディタはあくまで一般的な文章を作成するためのもののため、HTMLを書くのに特化しているというわけではございません。
HTMLを書くための専用のテキストエディタを使うことで正確に作業を進めることができるようになります。

文字入力する時間を短縮

テキストエディタには、文字の検索、置換、自動補完などの機能があり、一度入力した文字であれば自動的に入力することが可能です。
なので、HTMLで使うタグを入力しようとした際に、「a」から始まるタグがあれば自動で「a」から始まるタグがババーッと予測変換で出てきます。
この機能があるだけで長い文字を打たなくて済む、かつ、スペルミスやタイプミスを減らすことに繋がります。
また、文字数や複数のファイルを編集する場合でも全ファイルの文字を検索したり、置換したりすることができます。

見やすくする

テキストエディタには「シンタックスハイライト」などの機能が備わっております。
これはテキストの一部をその部分ごとに色分けして表示してくれる機能で、「タグ」と「内容」で色分けをしてくれるのでコード全部が見やすくなり、誤字脱字が減ります。
また、文字のフォントを変えることができるので似ている文字を区別することもできるので可読性が高まって構文やエラーなども分かりやすくなります。

専門性に長ける便利機能がある

テキストエディタは、プラグインで機能を追加することができ、足りない機能を補完してより使いやすく、より便利に進化します。
また専門のプラグインを複数導入すれば、専門職でも対応できるぐらいに機能が充実します。
この拡張性の高さも、テキストエディタの魅力の1つです。

参考:(【エンジニア監修】テキストエディタとは?〜生産性が100倍変わる〜)

ということで。まずはテキストエディタを導入することから始めましょう…!
なお、テキストエディタにはかなりの種類がある模様。
すーちゃんは、社長が導入してくれた「Visual Studio Code」というのを使っています。

Visual Studio Code

機能を使いこなせてはいないと思いますが、今のところ、HTMLもCSSも書けました。よかったです٩( ‘ω’ )و
なので、まず、HTMLってなんやねん。という方はテキストエディタを理解、導入するところが第一歩です。

偉そうに言ってる自分がまだよく理解していないので、すみません、精進します。

誰かの何かの役に立てば!!
ど素人万歳!雑草魂で頑張りましょう!!
今日の超超入門はここまで。 え? ほとんど何も書いてないって?

٩( ‘ω’ )و

それでは!!