瞬間と永遠.com 自分を探し自分を知るブログ@愛知県豊田市・名古屋市 > つたえる > マークアップする時の、要素名の名前サンプル > マークアップ
マークアップする時の、要素名の名前サンプル
選択されているタグ
タグを絞り込む
- 2010-01-16 (土)
- つたえる
マークアップ(コーディング)していて
時間がかかる原因のひとつに「迷い」があると思います。
最適なマークアップはなんだろとか、どうやって組むと後から楽かとか、
そういった建設的な迷いになら時間をかけてもいいんだろうけど、
「名付け」、例えば画像の名前や、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 戻る
参考にさせていただいたサイト、本
--
※この記事を書いた人、ミズノケイスケに興味を持っていただけましたら、リンクツリーをどうぞ。
この記事に関連する記事
- 関連ぐあい 3 : a-blog cms のフォーム、セレクトボックスの option コピペ用
- 関連ぐあい 3 : a-blog cms とマークダウンで大量の写真をブログにアップ
- 関連ぐあい 3 : a-blog cms でフォームを作るときに便利な日付の <option> コピペ用
- 関連ぐあい 2 : a-blog cms camp 2011春のこと と .htaccess で簡単高速化コピペ用
- 関連ぐあい 2 : HTML のタグの性質を理解するためのゲームとかあったらなー
- 関連ぐあい 2 : ブログのデザインを変更しました。CSS3便利やね。
瞬間と永遠.com 自分を探し自分を知るブログ@愛知県豊田市・名古屋市 > つたえる > マークアップする時の、要素名の名前サンプル > マークアップ
- RSS 購読
- リンク
コメント