vanillaice (Akira)

vanillaice (Akira)

正しい用語を識る
というのは物事を解決する際非常に役立ちます。

html, CSS, Java script などの分野は専門用語がたくさんあります。
日本人には厳しいかもしれません。
web上の標準語は English ですので 専門用語も英語が基本・基礎になってます。
そういった意味で htmlのお勉強初めでは 英語に堪能な方は一歩前からスタートできる気がします。
具体的なことはわからずとも 単語だけでなんとなく役割がわかるからであります (´・ω・`)

ここでは頻出html用語の正しい読み方や よくある間違いについて。
また 独自用語をなるべく使わずに正しい用語を使いましょうね。
みたいなことをつらつら綴ろうと思います

よくある用語間違い

よく目に耳にするけれども間違っている用語の使い方など。

「タグ」ってなんなの

「タグ」あるいは「htmlタグ」という言葉を良く使うことがありますけれど。
10人居たら7人はその意味をきちんと理解していません (´・ω・`)

例1 )

<iframe width="560" height="315" src="https://www.youtube.com/embed/UeUqV1-fAsg?list=PLyk-VGWvw5FU29b5jhdW8JEGPfaO0VNdu"></iframe>

例えばこれ。
YouTubeの動画を貼り付ける時に使用します。
実態に変換されるとこうなります 。↓
黒背景の中にある文字列を称するに
音楽タグ
というのを度々目にしますが、「音楽タグ」などというものは存在しません


Q「YouTubeの音楽タグを教えてください。」
A「なにその音楽タグって?」


Q「YouTubeの埋め込みのためのタグを教えてください。」
A「iframeタグembedタグを使えばできますよ。」

タグというのは一体何で 文字列中のどこを指すのか
がわかっていれば②の問に対する回答の意味がわかります。
そしてYouTubeなど動画コンテンツのためのhtmlについては一般的に 埋め込みコードといえば伝わります。

例2 )

<div style="background-color: red; width: 200px; color: white; padding: 20px;">あいうえお</div>

例えば上記の文字列。
変換するとこう 。↓

あいうえお

文字列を称するに divタグ ではありません
div要素
と言います。
同様に例1のYouTubeコードも iframe要素 です。

例2の文字列で「タグ」と呼べる部分は <div>の部分と </div>の部分だけです。
最初のものを 開始タグ
スラッシュつきのものを 終了タグ
と言います。
文字列全てを称するならば div要素 です。

上記が図解です。
「タグ」というのは文字列の一部分しか指しません。
全体を称するならば ○○要素 という呼び方をします。

○○ の中には「要素名」が入りますから、音楽タグ を考えると、音楽 あるいは music という要素名は存在しません。
従って「音楽タグ」という呼称はてんで間違ったものだってことです (´・ω・`)

htmlという概念を頭から取っ払って文字列を称するならば、コード, ソース, ソースコード が妥当です。

CSSタグ

んなもんあるわきゃねー(笑)
「タグ」というのはhtmlに使われるものですから 「CSSタグ」なるものはデタラメ用語です

「タグ」は命令?

ここは私も説明・表現の便宜上使うことがありますので反省すべき点ですが、htmlタグは何も命令などしません。
「タグ (tag)」の名が示す通り 単なる「しるし」です。
しるしはそれぞれに特徴を持っていますので その特徴を結びつけるためのものです。

「入れ子」とは?

入れ子(ネスティング)というのは html要素同士の親子関係ができて初めて「入れ子」になります。
稀にこんな表現を用いる方が ↓

例)

<div>あいうえお</div>

「divの入れ子のテキストを変えても大丈夫ですか?」
入れ子?? (´・ω・`)
何がどこが入れ子??
これ全く意味がわからなかったのですが どうやら質問者は
あいうえお
の部分を「入れ子」と表現しているようでした。
これは入れ子とは言わない。
「挟まれている」という表現をすべきところです。
入れ子ってのはこういうの ↓

<div>
  <div>あいうえお</div>
</div>

緑色のdiv要素は「入れ子されている」状態です。

html「語法」?

これ某ブログサービスで頻繁に見かけるのでびっくりするのですが。
日本に於いては「語法」という呼び方はしません。
「html語法」と書いて通じるのは台湾など一部のアジア地域だけで そこに日本は含まれません。
日本では html文法, html構文 が一般的。

なんで「語法」と覚えてはいけないかって、 検索しても台湾のページしか出てこないからです。
検索して出てこない = 問題解決できない。
検索上手はお勉強上手。
言い換えれば 検索下手は勉強下手
正しい用語を覚えなさい というのは、自分で 特にweb検索という手段を用いて物事を解決するには
正しい用語を用いないと結論にたどり着けないからです yo (´・ω・`)

正しい読み方

正しい と言っても本来は英語ですから 発音を日本語のカナに置き換えるのに違和感のあるものも。
以下は頻出ですので 正しく読めるかチェックして遊んでください。
htmlやCSS以外のものも「その他」として記載しています。

単語 × 定義/ html(=属性) CSS(=プロパティ) 値(=html, CSS共) その他
width ワイドス, ワイズ ウィズ 要素の横幅/ html, CSS
height ヘイト ハイト 要素の縦幅/ html, CSS
align アリン, アリグン アライン テキストや画像のインライン要素のX軸位置揃え/ CSS
vertical ベルティカル ヴァーティカル テキストや画像のインライン要素のY軸位置揃え/ CSS
alt アルト オルト alternative (オルタナティヴ) テキストなどの代替属性/ html
hidden ハイデン ヒドゥン 範囲から溢れたテキストなどのオブジェクトなどを非表示にする/ プロパティ値
a エー, アンカー リンク設定/ html
br ブラー ビーアール, ブレイク 改行/ html
iframe イフラメ, アイフラメ アイフレーム, インラインフレーム インラインフレーム設定/ html
embed - エン(ム)ベッド 動画・音声コンテンツなどの再生/ html
margin マーギン マージン 外側余白/ CSS
collapse - クラプス ボーダー折りたたみ/ CSS
font-weight - フォントウェイト テキストの太さ段階/ CSS
z-index ゼットインデックス ズィーインデックス オブジェクトの重なり順/ CSS
visibility - ヴィジビリティ 可視・不可視の指定/ CSS
opacity オパシティ(日本語一般表現では△) オゥペイシティ 不透明度/ CSS
relative リレイティブ レラ(レ)ティヴ 相対位置指定/ プロパティ値
absolute アブソルーテ アブソルート, アブソリュート 絶対位置指定/ プロパティ値
float フロアト フロート オブジェクトの浮かせ
hover フーバー ホバー カーソル・マウスオン動作/ CSS
column コルムン カラム 段組のボックス/ その他
justify ジャスティフィー ジャスティファイ テキスト均等割り付け/ プロパティ値
Google Chrome グーグルチャーム, グーグルクロメ グーグルクローム Google社製ブラウザ名/ その他
Iron イロン, アイロン アイアン SRWare社製ブラウザ名/ その他
Adobe アドベ アドビ フラッシュプレイヤーやフォトショップなどのリリースメーカー
ajax アジャックス エイジャックス 非同期通信システム/ その他
cloud クロード クラウド データ蓄積オンラインサービス/ その他
blog プログ ブログ 「ぷ」じゃなくて「ぶ」 「ウェ『ブ』ログ」(web-log)の略なので「ふ」に点々

最後のはオマケですが 中高年に多い。
グーグル「チャーム」も結構目にします。

まとめ

誰かに質問するにしろ web上で自分で検索するにしろ。
問題解決の近道は「正しい用語を使うこと」です。
Q&Aサイトなんかでも 質問者が独自用語で尋ねると聞き手(回答者側)は困ってしまいます。
専門用語を正しく覚えるだけでも問題解決能力・自己解決能力は飛躍的に向上します。

関連記事

Comments 2

There are no comments yet.
きろろ  
すごい……

永久保存版で、このページを切り取っておきたい……
とくに最後の表はコピペしたいほどです。

年始早々、勉強になりました。
ありがとうございます<(_ _)>

2017/01/12 (Thu) 02:18 | EDIT | REPLY |   
Akira  
To きろろさん

多少でもお役に立てれば幸いです ^^;

2017/01/12 (Thu) 16:25 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い