CodePen - demo:CSS Simple Hoverable DropdownArticle - https://www.nxworld.net/tips/css-simple-hoverable-dropdown.html...
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
内容を解説した記事に戻る 0.アニメーションなし menu submenu submenu submenu submenu menu submenu submenu submenu menu submenu submenu submenu menu submenu submenu submenu submenu menu submenu submenu submenu submenu 1.広がるように menu submenu submenu submenu submenu menu submenu submenu submenu menu submenu submenu submenu menu submenu submenu submenu submenu menu submenu submenu submenu submenu 2.フェードイン menu submenu submen
アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点
fixedになるとコンテンツの高さが変わる 最近ナビゲーション部分をウィンドウ上部までスクロールするとposition:fixedに切り替わってスクロール時に上部に配置され追随されるものがあるがWebページ内のナビゲーションがfixedに切り替わるとコンテンツから高さがその分引かれるためナビゲーションがアンカーリンク先への遷移の場合、正しく目的のところまで遷移できなくなってしまう。 例えばWebページ内の高さが2140pxでナビゲーションの高さが70pxのfixedになることで2140px-70px=2070pxとなりその分アンカーリンクの位置も変わるため正しく遷移できなくなる。 fixed時にアンカーリンクで正しく遷移できないサンプル ナビゲーションの高さを取得して計算する ナビゲーションの高さを取得してアンカーリンククリック時の移動位置を補正し、fixedになったときは失った高さ分を追
要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法
例えばこんなHTMLを横並びにする場合、 <div class="list-box"> <ul> <li></li> <li></li> <li></li> </ul> </div>CSSはこのようになるでしょう。divタグには横幅を指定し、ulタグには横幅を指定しないようにします。 .list-box { overflow: hidden; *zoom: 1; width: 320px; } .list-box ul { margin: 0 -10px 0 0; //ネガティブマージン padding: 0; } .list-box li { float: left; width: 100px; height: 100px; margin: 0 10px 0 0; background: #000006; }この方法を使えば「marginを0にするクラスを用意して端っこの要素のみに付ける
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
リキッドレイアウト（単位%）でネガティブマージンを使った要素の横並び例 | increment Log
.list-box { overflow: hidden; *zoom: 1; max-width: 320px; } .list-box ul { margin: 0 -10px 0 0; //ネガティブマージン } .list-box li { float: left; width: 100px; height: 100px; margin: 0 10px 0 0; list-style: none; background: #f39c12; } %値の横並び例横幅のサイズが違うのは、ウインドウの拡大・縮小でちゃんとリキッドレイアウトになっているか確認できるようにした為です（320pxだと小さくて確認できなかったので・・） .list-liquid-box { overflow: hidden; *zoom: 1; max-width: 500px; } .list-liquid-bo
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
[CSS] divのみで可変幅の高さが揃った縦の三段組 - fjiブログ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>可変幅で高さが揃った縦の三段組</title> <style type="text/css"><!-- html, body {margin:0px; padding:0px; height:100%;} #page {margin:0px auto; min-width:6
![[CSS] divのみで可変幅の高さが揃った縦の三段組 - fjiブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a0477ca6d84271edd5e5ddfaef1b2e0e4ac21f11/height=288;version=1;width=512/http%3A%2F%2Ffjiblog.cocolog-nifty.com%2F.shared-cocolog%2Fnifty_managed%2Fimages%2Fweb%2Fogp%2Fdefault.png)
IE6やIE7で、画像を高さ方向の中央揃えにする方法。 - CSSトラブル対策 | ねこだまのCSSリファレンス&デモ
ロゴや商品画像など高さが一定ではない画像の高さを揃える方法です。 確認ブラウザは、ie6～ie9、firefox、Google chormeなどでJavascriptなどは使用せず、CSSのみで対応させています。 この問題は、そもそもie8以降や、firefoxなどでは、普通にdisplay:table-cell;などで対応できるのですが、 IE6、IE7は、この値に対応していないため普通にやると高さを中央揃えにすることができません、長年個人的にもこころ苦しい問題だったのですが、 いろいろ模索していたところ、極力CSSハックを使わずに簡潔？に対応する方法ができたのでご参考になればと思います。 IE6、IE7のシェアは落ち続けていますが、まだしばらくはある一定のシェアが残り続けるもと思われますが、今後もまだしばらくは有効なテクニックではないだろうか？と思われます。 ※その他、高さを中央揃えす
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
★★★隙間を埋める！フッターをウィンドウ下部に固定する3つの方法 | 株式会社LIG
こんにちは、モモコです。 ページを作っている際に、想定していたコンテンツ量よりも原稿が短く、フッターの下にブラウザとの隙間が空いてしまう事がありました。 このスカスカ感を埋めるべく、フッターをウィンドウ下部に固定する方法を調べたので備忘録も兼ねてご紹介します。 positionを使い、フッターをコンテンツ下部に固定する方法 【HTML】 <html lang="ja"> <body> <div id="wrap"> <header>ヘッダー</header> <div id="contents">コンテンツ</div><!-- contents --> <footer id="footer">フッター</footer> </div><!-- wrap --> </body> </html> 【css】 html,body{ height:100%; } #wrap{ width: 100%
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンテンツの高さの自動調整｜デモ｜softelメモ｜株式会社ソフテル
マウスオーバーエフェクト Creative Link Effects
Page Not Found - NxWorld
iPad・iPhoneのSafariで背景が切れてしまう時のCSS
https://depthcode.com/2010/11/minwidth.html
サイト全体を上下中央配置にする方法 | CSS Lecture