瞬間と永遠.com 自分を探し自分を知るブログ@愛知県豊田市・名古屋市 > つたえる > マークアップする時の、要素名の名前サンプル

マークアップする時の、要素名の名前サンプル

マークアップ(コーディング)していて
時間がかかる原因のひとつに「迷い」があると思います。

最適なマークアップはなんだろとか、どうやって組むと後から楽かとか、
そういった建設的な迷いになら時間をかけてもいいんだろうけど、
「名付け」、例えば画像の名前や、class名、フォルダ(コンテキスト)名
なんかで時間をとられるのがどうにも痛い。

でもローマ字はいやだし、01,02,03…もちょっと、
意味が通らないのもプライドが許さん、
といった感じでついつい迷ってしまいます。

自分ルールを少しずつ構築

ということで、そんな迷いを減らすため
自分でルールを少しずつ構築してきたのですが、
それらをちょっとシェアしたいと思います。
世の中助け合いですものね。

良いか悪いかというよりも、自分が使っているもの、
迷わないためのもの、という位置づけです。
少しでも参考にしていただければ幸いです。

画像の名前

役割ごとに頭につけるもの

  • bg_xxx 背景
  • image_xxx 画像
  • photo_xxx 写真
  • text_xxx テキスト
  • btn_xxx ボタン
  • icon_xxx アイコン
  • title_xxx タイトル
  • illust_xxx イラスト
  • bnr_xxx バナー
  • logo_xxx ロゴ

形状をもとに

  • triangle 三角
  • square 四角
  • circle 丸
  • dotted 点線
  • dashed 破線

コンテキスト、フォルダ名

  • order 注文
  • faq よくある質問、Q&A
  • greeting あいさつ
  • application お申し込み
  • order 注文
  • catalogue カタログ(イギリス表記)
  • catalog カタログ(アメリカ表記)
  • company 普通の会社?
  • corporation 法人っぽいやつ?
  • recruit 求人、スタッフ募集(正社員?)
  • inquiry お問い合わせ、質問

ID

レイアウト用

  • areaContainer ページ全体
  • areaHead ヘッダー
  • areaContents コンテンツ部分
  • areaContentsMain メインのコンテンツ
  • areaContentsSub サイドカラム
  • areaFoot フッター

役割別

  • siteLogo メインのロゴ
  • topicPath ぱんくずリスト
  • globalNavi グローバルナビゲーション
  • localNavi ローカルナビゲーション
  • copyright コピーライト

class(子孫セレクタのみで利用)

汎用

  • box
  • boxIn
  • boxOut
  • twoColumnBox 2列のボックス
  • threeColumnBox 3列のボックス
  • section セクション、区切り

役割

  • more もっとみる
  • pageTop ページの上
  • navi ナビゲーション
  • headline ヘッドライン 
  • category カテゴリー
  • summary 概要
  • list 一覧
  • description 説明、記述
  • thumbnail サムネイル

パーツ

  • link リンク
  • name 名前
  • telephone 電話
  • arrow 矢印
  • require 必要
  • site サイト

ページの役割

  • archive 記事一覧
  • entry 個別記事

ありがちなもの

  • title タイトル
  • size 大きさ
  • text テキスト
  • image イメージ

場所

  • main メイン
  • sub サブ
  • left 左
  • right 右
  • top 上
  • bottom 下
  • forward 進む
  • back 戻る

参考にさせていただいたサイト、本


--

※この記事を書いた人、ミズノケイスケに興味を持っていただけましたら、ミズノのFacebookをフォローください(一番更新頻度が高いです)

2018年10月、ポエジーのウェブサイトをリニュアルしました。
ポエジー*経営者の夢を叶えるジェットエンジン ※無料相談受付中

この記事に関連する記事

コメント

投稿
名前
 
メールアドレス
 
URL
 
タイトル
コメント
パスワード
Cookieに保存

瞬間と永遠.com 自分を探し自分を知るブログ@愛知県豊田市・名古屋市 > つたえる > マークアップする時の、要素名の名前サンプル

RSS 購読
リンク
  • track feed 瞬間と永遠.com

↑PAGE TOP