The other way round

ARTICLE PAGE

htmlやCSSの用語を正しく覚えることが自己解決能力に繋がります

author photo

Byvanillaice (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

きろろ  

すごい……

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

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

2017/01/12 (Thu) 02:18 | EDIT | REPLY |   

Akira  

To きろろさん

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

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

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)