LoginSignup
79
39

More than 3 years have passed since last update.

省略されてばっかりなHTML用語を読み解く

Last updated at Posted at 2019-10-08

はじめてのQiita

はじめましてあさちゃんです。
普段は事務職でお仕事をしているのですが、
合間を見てコーディングの勉強もさせてもらえることになりました。

今回のテーマは

:weary: < HTML用語って英単語が省略されているから覚えづらい!!!!

というところから思いついたのですが、
この投稿が初めてのQiitaになるので、
まずは私自身の紹介を記しておこうとおもいます:point_up_tone1::girl_tone1:

\誰も聞いてね~ぞ~/ 

と、ヤジが飛んできそうですが、始めます。

パソコンが仲間になりたそうな目でこちらをみている!

私の父はエンジニアで、自分の仕事が天職だと言い張る根っからのPCオタクです。
(パパ大好き:man_tone1:

なので私は、
生まれたときから身近にパソコンとインターネットがある暮らしを送ってきました。

幼稚園生の頃は父がパワーポイントを使って
『走る車』
(柱にぶつかると「どんがらがっしゃーん!」と音を立てて壊れてしまうアニメーション:red_car:
を再現して見せてくれるなど、父らしい遊ばせ方をしてくれていました。

画面の向こう側に友達がいる小学生

父のおかげでパソコンが大好きな子供に育った私は、

小学生の頃にはオンラインゲームで知り合った年上の女の子とSkypeで通話をしていましたし、
お小遣いをもらったらそのほとんどをアバター課金に費やしていました。

うちにはペットとかいなかったし、一人っ子だった&学校で友達も少なかったので
学校が終わるとすぐに帰ってきてPCで夜遅くまで遊ぶような
ちょっと心配になる子供だったと思います。(笑)

そんなこんなで

(めっちゃ雑な省略)

次第に自分のWEBサイト作ってみたいなーとか、
自作してみること」に興味を持つようになったわたしは
HTMLやCSS、javascriptを少しだけ触れるようになりました。

でも、最初はネットや本にあるサンプルコードを真似してるだけで、
結局書いているものの本質?みたいな部分が分かってないんですよね。
だから全然覚えられなくて。

なので今回は自分のための備忘録として、

:rolling_eyes: < なんじゃこりゃ?

なタグや用語の名前の意味なんかを記して覚えていこうと思います。

今まであんまり気にしなくてもタグとか使い方覚えられた天才肌な皆さんも
ほえ~~~って感じで眺めてみてもらえたらうれしいです。(初投稿なので)(実は初投稿2回目だけど)

本編

① 対象の用語
② 正式名称(略されていない形)
③ 日本語の直訳
④ 私的な意訳
④ 私の解釈・感想
という流れで覚えていきたいと思います。

HTML

正式名称:Hyper Text Markup Language
直訳:過度に 文書 印を付ける 言語
意訳:めっちゃ文書にを付ける言語
解釈と感想:
意訳つけると、なんていうか卍!って感じで私は好き。

うーん、なんで「印」を付けるんだ・・・?

と思ったので調べてみたけど、
コンピューターに「ここから本文ですよ~」「ここは重要だからね~」と
分かりやすくするために分かりやすくを付けて文章を「構造化」するらしい。

そうした書き方をする言語を「マークアップ言語」と呼ぶが、
HTMLのほかにも
 ・Standard Generalized Markup Language(意訳:普通に一般化されてるマークアップ言語)
 ・Extensible Markuo Language(意訳:拡張できるマークアップ言語)
とかっていう仲間がいるそうな。

なんでHTML先輩だけ「めっちゃ」なんだろ。その辺はまた調べてみよう。

meta (タグ)

正式名称:METAinfomation
直訳:メタ情報
意訳:メタい情報
解釈と感想:
いやだからメタってなんやねん!!
メタがわからんねんて!!!

という私のためのメモ

・そもそも「meta」は、古代ギリシア語で前置詞として使われていたらしい。
・英語のmeta-は「後から」「超えて」「ともに」「変化」などのニュアンスの接頭語で
 そもそもがいろんな目的で使用される
・情報系におけるメタは「何かについての何か」という意味なので
・HTMLにおけるmetainfomationは、「このHTML文書についての情報

ってことになるらしい
ウェブサイトから順番にメタを掘り下げたら

ウェブサイト
↓メタ
HTML文
↓メタ
英語?

なのかな?
プラトン哲学で出てくる「イデアのイデア」みたいだ。

OGP

正式名称:Open Graph Protocol
直訳:開く 図表 要綱
意訳:公な図表についての要綱
解釈と感想:
うーん、意訳が合ってるのか自信ないなー。

OGPってFacebookとかTwitterでリンクがシェアされたときに出てくる
サムネイル+タイトル+概要みたいな箱の
中身をちゃんと設定するときに使うやつじゃないですか。

だからあの箱が図表が不特定多数にシェアされるから「公な図表」って表したんですけど。

ちゃんと理解していて教えてくれる方いたらぜひ教えてください。。。

おわり

調べながら書いてたら結構時間がかかってしまったので
今回は用語3つでおわりにしたいと思います。

また覚えづらい単語があったら調べてみます!

79
39
11

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
79
39