our note web制作のwiki

現役フロントエンジニアが、web制作に必要なHTML・CSS・Sass・Javascript・jQueryなどの知識を参照しやすい形で記事に致しました!

個人でも、コーディングやWebサイトで使用するパーツ作成など、様々なお仕事をいただいております。

このページは、私が運営しているour noteと私自身の紹介ページです。

HTMLのid・class名の付け方とよく使う英単語「popup」

HTMLのid・class名でよく使う英単語「popup」

popupをid・class名として使用する際に指すものは、ポップアップです。

ですので、それに適したid・class名を使用しましょう。

英単語をHTMLのid・class名に使用した例

<div class="wrap">
<section class="popup">
<h2>popup(ポップアップ) </h2>
<div class="text">
id・class名で使用されるpopupという英単語は「ポップアップ」を記述するコンテンツのclass・ID名に使用するとわかりやすいです! </div>
</section>
</div><!-- /.wrap -->

HTMLのid・class名の命名規則

まず、id・classをつける上で大事なことは、長さや見やすさよりも、文字列を見ただけで意味が伝わるかどうかです。

ですので、自分がわかりやすいid・class名を考えるのも良いですが、下記の表を見て一般的な命名や先輩の命名規則を知ることがとても重要になります。

さらに、自分でわかりやすいid・class名をつけたり提案できれば、株はかなり上がると思いますので、class名を決める考え方も学んでいってください。

より詳しい命名規則と命名規則の種類について

id・class名に「-(ハイフン)「_(アンダースコア)」を使うかどうか大文字か小文字か。

どんな命名規則があるかなどは下記のページにまとめましたので、ご参考ください!

HTMLのid・class名の命名規則と命名規則の種類

翻訳した英単語をid・class名に使用する際の注意点

恐らく多くの方が使用しているGoogle翻訳ですが、翻訳した英単語そのままid・class名にすると必要以上に長くなっていしまいます。

例えば、会社のサービス一覧コンテンツを作成するとなった時、id・class名を決める際「サービス一覧」と検索すると「List of services」と出てきます。

これをclass="list_of_services"としてしまうと必要以上に長くなってしまいます。

※文字数的にはOKなのですが、考え方的にはNGです。

極端な例を出すと「新人研修」のid・class名を「training」「new_training」とせずGoogle翻訳通り「New employee training」とすると流石に長いですよね。

冒頭でも述べましたが、id・classをつける上で大事なことは、長さや見やすさよりも、文字列を見ただけで意味が伝わるかどうかです。

最初は難しく感じるかもしれませんが、慣れればわかりやすい名前が付けられるようになりますので、ご活用ください!

ちなみに、私はGoogle翻訳をタブに固定して使用しています!

Google翻訳

プログラミングでよく使う英単語一覧

HTMLのid・class名でよく使う英単語を一覧にしました。

英単語はリンクになっており、クリックするとその英単語の意味や使い方が書いてあるページに移動します。

ここに書かれている英単語は、HTMLによく使われますが、JavascriptやPHPにも使用されますので「こんな英単語がある」と知っておくだけでも引き出しが増えるので実務で役に立ちます。
about〜について
company会社概要など
serviceサービス
work、works事業実績
history沿革、歴史
accessアクセス、交通情報
privacyプライバシーポリシーなど
recommendおすすめ
contact、inquiryお問い合わせ
feature特徴、特集
price料金
news、information、infoニュース、新着情報、情報
categoryカテゴリー
result結果
staffスタッフ、社員紹介など
recruit採用情報
faqよくある質問、Q&A
otherその他
wrap、wrapper外枠
innerインナー、内枠
block、boxブロック、ボックス、要素をまとめるとき等
common、com、cmn共通の
module、modモジュール、部品
note注釈
notice、caution警告、注意文
text、txtテキスト、文章
title、tit、ttlタイトル、見出し
leadリード文
moreもっと、更に
detail詳細、細部
banner、bnrバナー
logoロゴ画像
icon、icnアイコン
button、btnボタン
movie動画
image、img、thumbnail画像、サムネイル
slide、sliderスライド、スライドショー
popupポップアップ
circle
triangle三角
square四角
round角丸
containerコンテナ、容器。
wrap、wrapper、outer、外枠。
groupグループ、集まり。
area範囲、特定の場所。
section区画。
main主要な。
primary主要な。
secondary補助的な・第二の。
tertiary/third第三の。
quaternary/fourth第四の。
fifth/sixth/seventh/eighth/ninth/tenth第五、第六、第七、第八、第九、第十、、、、
common共通の。
global全体的な。
local局所的な。
general一般的な。
siteサイトの。
top/right/bottom/left上/右/下/左。
side/sidebar補足、横の。
homeホーム、トップページなど。
post投稿。
article記事。
catch関心、興味を惹く。
description/desc概要、説明。
introduction/introイントロ、導入、前置き。
listリスト、一覧、表。
menuメニュー、一覧。
column/col縦の列。カラム。
textテキスト、文字。
thumbnail/thumbサムネイル、縮小画像。アイキャッチともいう。
address住所、アドレス。
next次の。
previous/prev前の。
overlay/maskかぶせる。覆う。
small/medium/large小/中/大。
slider/carouselスライダー/カルーセル。
breadcrumbパンくずリスト。
toggle開閉など切り替える部分のこと。トグル式などという。
search検索。サーチ。
dropdownドロップダウン。項目がズラっと下に表示されるようなもの。

Google翻訳を有効活用

恐らく多くの方が使用しているGoogle翻訳ですが、翻訳した英単語そのままid・class名にすると必要以上に長くなっていしまいます。

例えば、会社のサービス一覧コンテンツを作成するとなった時、id・class名を決める際「サービス一覧」と検索すると「List of services」と出てきます。

これをclass="list_of_services"としてしまうと必要以上に長くなってしまいます。

※文字数的にはOKなのですが、考え方的にはNGです。

極端な例を出すと「新人研修」のid・class名を「training」「new_training」とせずGoogle翻訳通り「New employee training」とすると流石に長いですよね。

冒頭でも述べましたが、id・classをつける上で大事なことは、長さや見やすさよりも、文字列を見ただけで意味が伝わるかどうかです。

最初は難しく感じるかもしれませんが、慣れればわかりやすい名前が付けられるようになりますので、ご活用ください!

ちなみに、私はGoogle翻訳をタブに固定して使用しています!

Google翻訳

HTMLのid・class名作成ツールを利用

id・class名を自分で考えて決めるのは、頭のリソースを使うのでやめたい!という方には是非、id・class名作成ツールを利用していただければと思います。

今回挙げるのは「codia」という、ツールで、上記画像のように、テキストを入力するとid・class名に使える長さ、意味合いに編集して表示されます。

ですので、こちらとしては文章を打ち込むだけでid・class名が勝手に生成されるということすね!

これなら頭も使わないので、とても便利です!

登録も無料なので1度使用してください!

codia