(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

タグ:css

初めてタイトル通りなバグに遭遇して、ググッても出てこなかった。

このバグの条件として
・position指定の親(<nav/>)relative 子(<ul/>)fixedのヘッダー固定式
・子fixedの中にドロップダウンメニュー
・同ページにvideo要素かgoogleマップがある
・1ページ程スクロールさせる

上記のようなページをchromeで閲覧すると、
ドロップダウンメニューの中身が消えたり、hover cssが無効になったりの
現象が起こった。

解決策として
親(<nav/>)relativeも fixedにしてみると直った。

毎回悩むんです。
本当に、何年やってんだ!!って自分で思いながら。

また次の案件で悲しみに包まれないように、
今からでも殴り書きでいいので書いていこうと思います。
(気が向いたら更新するつもり)

昔はキャメルケースだの、アンダーバーだの色々試してましたが、
先月あたりから単語と単語はハイフンで繋ぐ形式に移行しました!
ので、以下の記述はハイフンさん大登場です。
理由はCSSのプロパティ名とか値とかもハイフンですし、data属性とかもハイフン、最近のjavascriptフレームワークも独自属性にハイフン使っているので、統一してみました。
統一感があるとすごいね、とても見やすくなりました!我ながら単純である。

ではでは、あまり期待をせずに参りましょう ┌(・。・)┘ ドドドドドド
※あくまでも一例です。
※改善したいけどとりあえずってのが結構あります。助けてくれ!


■site-(そのサイトの揺るぎないclass、またはid)

site-wrapper

site-header
site-logo
site-nav-global
site-nav-language

site-contents
site-main

site-footer
site-nav-footer


■ico-(アイコン、連番が良いのか名前つけた方が良いのか教えてほしい)

ico-arrow-red-top(この辺汚いので何とかしたいぞ!)
ico-arrow-red-right
ico-arrow-red-bottom
ico-arrow-red-left


■btn-(ボタン)

-背景画像
btn-nav-add
btn-nav-remove
btn-nav-success
btn-nav-failure

-テキスト
btn-txt-red(色の名前ってダメかな???)
btn-txt-white
btn-txt-black


■group-(グループ)
group-about
group-product
group-cart
group-contact
group-form
group-form


■grid-(グリッド)
CSSフレームワークで良くあるやつ!
最近は Pure がお気に入りです。
grid-u-1
grid-u-2
grid-u-3
grid-u-4
grid-u-5


■ttl-(タイトル)
他のノードの入れ子になっていたら文字が、
小さくなるなどの処理を入れると扱いやすさアップすると思います!
ttl-cool
ttl-primary
ttl-h1
ttl-h2


■txt-(テキスト)
txt-note
txt-decoration
txt-attention


■form-(フォーム)
input-text-normal(inputの時はtxtにせずに、textにした方が良いのか悩み中...)
input-text-mail
input-text-password
input-text-tel

input-check-normal
input-check-cool

input-radio-normal
input-radio-cool




書いた日:2014年10月20日(月)18時55分
記事と関係の無いただのメモ:hero > section > group > team > unit

このページのトップヘ