a:hover の扱いではまったこと(jQuery) – BmathLog
どうやら jQuery で $("a:hover") って使えなくて、代わりに $("a").hover( function(){ /* mouse enter の処理 */ $(this).css("background-color", "#ffaaaa"); }, function(){ /* mouse leave の処理 */ $(this).css("background-color", "#ffffff"); } ); と書くのだそうだ。 やりたいこと メニュー部分のリンクの背景色を クリックところは背景を赤っぽく カーソルがないときは白 カーソルが乗ったらグレー のようにしたい。 そもそも CSS ファイルでかけないのか 最初にやってみたこと CSS には a { background-color: #ffffff; } a:hover { background-color:
ネガティブマージンを使ってボックスを均等に並べる方法 | スタッフブログ｜dis-ドアズインターネットサービス｜WEB（ホームページ）制作、作成・SEO・FLASH・ビジネスブログ・ユーザビリティ・アクセシビリティ｜神戸・大阪
今回はネガティブマージンの便利な使い方について紹介します。 ※ネガティブマージンとは、CSSで、マイナス値が与えられたmarginプロパティのことを言います。 例1）3カラムのボックスを均等に並べる HTML <div id="container"> <div id="container-inner"> <div> カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1 </div> <div> カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム
ネガティブマージン 右側を固定幅にしたリキッドレイアウト - bnote
floatを使った2段組で、右側が横幅固定で、左側が画面横幅の残りを可変でということをしたいとき、 どうしたら実現できるのでしょう。 例えば、左側を可変で右側を200pxとした場合、左側の width に100% - 200px と指定できれば問題ないのですが このような指定はできそうにありません。 これを解決する方法が ネガティブマージン になります。 [参考:Creating Liquid Layouts with Negative Margins] 可変にしたいほうの段のwidthを100%とし、marginをマイナスのピクセルを指定することによって リキッドレイアウト を実現することができます。 例えば、上記例のような場合、左側の段に width を 100% とし、margin-right を -200px と float:left を指定します。 左側の段の width は 1
【スマホサイト】display:table-cellにmarginを指定したい ｜ Tips Note by TAM
スマホサイト制作でこのようなデザインを実装する場合、 テキスト位置の調整を考えると、displayプロパティが便利です。 セル間隔をmarginで調節したいところですが、table-cell に margin は無効です。 そこで、border-collapse で dasplay: table のセル間隔を調整したいと思います。 border-collapse でセルのボーダーを重ねるか間隔を空けるかを、 border-spacing でどれぐらい空けるのか指定できます。単位はpxやem、exなどです。 このプロパティは display: table を指定したクラスに追加します。 ■html <section class="pagelist"> <ul class="tab-area"> <li class="tab-link now radius-large-top"><a href
フッタを常に下部に配置 - lucky bag
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。 footerサンプル 実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。 html と body への指定 サンプルのソースを大雑把に分けると下記のような構造になっています。 <div id="container"> <div id="contents"> <div id="header">ヘッダ</div> 内容 </div> <div id="footer">フッタ</div> </div> まず、html と body の高さを 100% と指定しておきます。 container への指定 次に、
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する 2013年09月03日 16:48HTML / CSS CSS の white-space: nowrap; と HTML の <wbr> 要素の組み合わせによる挙動が Firefox と Google Chrome で違ってて、 特に日本語コンテンツの表示を統一しようとすると何かとややこしいので その回避方法を書いてみます。 その前にちょっと前提のお話を。 white-space: nowrap; のおさらい CSS を書く人には説明の必要もないと思うんだけど、 white-space というのは HTML の要素内で ホワイトスペース（スペース文字や改行コードなど）がどのように扱われるかを指示するための CSS のプロパティですね。 W3C によ
position―スタイルシートリファレンス
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。 positionプロパティで指定するのは、配置方法（基準位置）のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 ■値 static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositi
★★★隙間を埋める！フッターをウィンドウ下部に固定する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 の基本的な使い方と注意点｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
display:table-cell は以下のような使い方をします。 /*CSSの記述*/ <style> ul.nav { display:table; } ul.nav li{ display:table-cell; vertical-align:middle; text-align:center; } </style> /*HTMLの記述*/ <ul class="nav"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul> 親要素に display:table を指定し、テーブル扱いとする display:table-cell は display:table とセットで使う事が多いです。 親要素（ul.nav）に display:table を指定することで「表（<table>）」の扱いになりますので、子要素
![[CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/064c25df7076bfa97df969ef135adeb7d7d66d9f/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2012%2F09%2Fdisplaytablecell.png)
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
凹み感が可愛らしさアップ！CSSの「text-shadow」でテキストに一味変わった表現をつける使い方 | BLOG ROOM9（ブログルームナイン）
cork baby / andyprice 本日もroom9にお越しいだただきありがとうございます♪ Qtaro（＠Daisuke_9taro）です。 ブログやサイト制作において欠かせない「CSS」 最近では各種ブラウザの「CSS3」対応も進み、リッチな表現が安心して使えるようになってきました。 今回はそんなCSS3のプロパティの一つ「text-shadow」を使ってできる、ちょっとポップな文字表現を紹介したいなと思います。 この「ふんわり凹み感」を出します♪ 今回目指すのはこの感じ。 画像ではなく「テキスト」でのサイト名表現ですが、ちょっと特徴ありますよね♪ 凹んでいるように見えますが、これは「text-shdsow」を用いて、「凹んでるっぽく」表現しています。 画像だと見づらいという方はこちらから^^ Stinger-minimum デモ まずは良く使われる方法 まず最初に、良く使われ
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
clearfixで指定するfloatの解除｜上級CSSレイアウト講座
CSSレイアウトでfloatを使用した際、通常は親要素内にfloatする要素があり、floatに続く要素にclearを指定し回り込みを解除します。（これが基本です。）clearfixとはclearプロパティを使わずにfloatを解除する手段です。 例えば親要素内でデザイン上どうしてもfloatを解除する為のボックスを設けたくない場合などに利用します。 一部のブラウザで親要素内でfloatを解除しなかった場合に起こる現象として、親要素内に指定した背景画像が表示されない、或いは親要素の下まで表示されないなどがあります。 以下にサンプル解説します。 サンプルソースと通常指定 <div id="mainbox"> <!-- 親要素 --> <div id="box-a"> *** </div> <!-- float --> <div id="box-b"> *** </div> <!-- floa
ideahacker.net - ideahacker リソースおよび情報
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.
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
要素の横幅と高さの比率を保つ | 集の一期一会
letter-spacingで字間を開けたときに最後の字の後ろまで開いてしまう問題への対処法 - Qiita
https://ttf2eot.sebastiankippe.com/
css-lecture.com