Web制作フローの再考とDesigning in the browser
多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき
アンカーを:hover状態にすると親ブロックの高さが変化する - CSSバグリスト
以下の条件群のいずれかに該当するとき、アンカーにマウスポインタ等を乗せて:hover状態にすると内側から3番目のボックスの高さが増加したり減少したりする。 条件群1 3重以上の入れ子ブロックになっている。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 最も内側のブロックに任意の上下マージンを設定している。 内側から2番目のブロックに背景とボーダーを設定している。 内側から3番目のブロックに任意の幅を設定している。 条件群2 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 内側から2番目のブロックに任意の上下マージンを設定している。 内側から2番目のブロックまたはそれより内側にある要素に背景を設定している。 内側から3番目のブロックに任意の幅を設定し
a:hoverで背景を設定したらIEでバグが発生したのでメモ
久々に、なんだこれ！？っていうバグにぶちあったった。 グローバルナビゲーションに:hoverを設定したところ、 なぜかその下に設定していたイメージも動いた・・・ しかもIEだけ･･･なぜなんだ！？ ってことで自分の解決策のメモ代わりに書いておく。 バグが発生したときのソース ◎ HTML <!-- ●wrap --> <div id="wrap"> <!-- ●header --> <div id="header"> <h1>ろご</h1> <p>せつめいぶぶん</p> <ul> <li><a href="#">ほーむ</a></li> <li><a href="#">なび</a></li> <li><a href="#">なび</a></li> <li><a href="#">なび</a></li> <li><a href="#">なび</a></li> <li class="last-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
a要素を:hoverすると、親要素の高さが小さくなる - NoteBook
