HTML / CSS

2021.10.15 作成

覚えておきたい用語の解説 - コーダー編（HTML, CSS, JavaScript）

「コーダー」が覚えておきたい用語をまとめました。

使い方や書き方は分かるけど名称が分からない...という用語を多めに載せています。初心者の方は是非覚えましょう。

HTML系

インラインスタイル

<div style="color: #f00;">のように、タグの中にCSSを記述すること

属性名（属性）

<div style="color: #f00;">の「style」の部分のこと（classやidも属性名です）

属性値

<div class="hoge">の「hoge」の部分のこと

兄弟要素（隣接要素）

<div class="a"></div>
<div class="b"></div>

同じ階層に並んでいる要素のこと

.aの隣接要素は.b

祖先要素

<div class="a">
　　<div class="b">
　　　　<div class="c"></div>
　　</div>
</div>

自分の親にあたる全ての要素のこと

.cの祖先は.bと.a

子孫要素（孫要素）

<div class="a">
　<div class="b">
　　<div class="c"></div>
　</div>
</div>

自分の子にあたる全ての要素のこと

.aの子孫は.bと.c

CSS系

セレクター

p { color: #f00; }のpのこと

プロパティ

p { color: #f00; }のcolorのこと

値

p { color: #f00; }の#f00のこと

ブロック要素

disply: block;が摘要されている要素

divやpのdisplayの初期値がblockです

インライン要素

disply: inline;が摘要されている要素

spanやimgのdisplayの初期値がinlineです

※HTML5ではブロック要素やインライン要素の概念は廃止されていますが、現場では昔の名残で使われていることがあります
（今はHTML5ではなくHTML Living Standardだから...のようなツッコミはお控えくださいmm）

フレックス

display: flexのこと

「○○の要素をフレックスにして」 = ○○の要素をdisplay: flexにするということ

2カラム, 3カラム（xカラム）

カラム = 列

「2カラムにして」 = 縦2列にするということ

マイナスマージン、ネガティブマージン

marginの値をマイナスにすること（例：margin-top: -20px;）

主に、要素を上や左にズラす時に使います

疑似要素

::before, ::afterのこと

疑似要素とは：https://www.itra.co.jp/webmedia/what-is-pseudo-elements.html

疑似クラス

:hover, :foucsなどのこと

<a>や<input>などでよく使いますね

疑似クラスとは：https://www.omakase.net/blog/2021/02/GiziYousoClass.html

隣接セレクタ

p + p { color: #f00 } のような書き方

自身の兄弟（隣接）要素に対してCSSが摘要される書き方です

フクロウセレクタ

* + * { color: #f00 } のような書き方

フクロウセレクタの便利な使い方：https://eclair.blog/usage-owlselector-in-css/

その他

CDN

コンテンツ・デリバリー・ネットワーク（Content Delivery Network）の略。

プラグインなどのCSSやJavaScriptのファイルを自分のサーバーにアップして読み込むのではなく、特定のサイトで配信されているファイルを読み込ませることです。

// これはCDNでjQueryを読み込んでいる
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

// こっちは自分のサーバーにファイルをアップして読み込んでいる
<script src="/js/jquery-3.6.0.slim.min.js"></script>

API

よく聞く用語ですね。

APIとは「Application Programming Interface」の略です。

APIとはソフトウェアやアプリケーションなどの一部を外部に向けて公開することにより、第三者が開発したソフトウェアと機能を共有できるようにしてくれるものです。USBは外部デバイスとパソコンを繋ぐインターフェースですが、APIはソフトウェア同士を繋げます。つまり、異なるソフトウェアやサービス間で認証機能を共有したり、チャット機能を共有したり、片方から数値データを取り込み、別のプログラムでそのデータを解析したりできるようになります。

引用元：https://data.wingarc.com/what-is-api-16084

超簡単に言うと、「第三者が用意した機能やデータを使って、機能を実装する」ことです。

例えば...「駅データAPIを使って全国の駅一覧のリストをサイトに表示してね」と依頼されたら以下のような流れで、APIを使って機能を実装します。

駅データAPIの情報をJavaScriptで取得する（この「駅データ」が、第三者が用意したデータになります）

{ station: { 1: '新宿', 2: '代々木', 3: '原宿' } }
取得したデータをHTMLに変換する

<li>新宿</li>　<li>代々木</li>　<li>原宿</li>
変換したHTMLをサイトに表示させる