HTML / CSS

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

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

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

 

HTML系

インラインスタイル

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

属性名(属性)

<div style="color: #f00;">「style」の部分のこと(classidも属性名です)

属性値

<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;が摘要されている要素

divpdisplayの初期値がblockです

インライン要素

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

spanimgdisplayの初期値が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を使って機能を実装します。

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

    { station: { 1: '新宿', 2: '代々木', 3: '原宿' } }

  2. 取得したデータをHTMLに変換する

    <li>新宿</li> <li>代々木</li> <li>原宿</li>

  3. 変換したHTMLをサイトに表示させる

コアウェブバイタル(LCP/FID/CLS)

Googleは、Webサイトを3つの指標「LCP」「FID」「CLS」で評価をして、「評価の良し悪しがSEOにも影響出るよ」と名言しています。

この3つの指標「LCP」「FID」「CLS」のことをコアウェブバイタルと言います。

これからWebサイトを作る場合は、この3つの指標を意識して作らなくてはいけません。

  • LCP(Largest Contentful Paint):サイトの読み込みスピード
  • FID(First Input Delay):サイトの応答性
  • CLS(Cumulative Layout Shift): サイトの視覚要素安定性

詳しい解説記事:https://liginc.co.jp/556930

レイアウトシフト

記事などのリンクをクリックしようした時に、いきなり画面がガクッっとズレて、違うリンクや広告をクリックしてしまったことはありませんか?

上記のような、画面がガクッっとズレること「レイアウトシフト」と言います。

画面がガクッっとズレるイメージ:https://web.dev/cls/

 

主にページ読み込み時に画像がある箇所で起こります。

 

レイアウトシフトは、先程紹介したコアウェブバイタルの「CLS(Cumulative Layout Shift): サイトの視覚要素安定性」の評価に影響を与えます。

最も簡単な対策は、<img>タグに直接widthheightを指定することです。