Google Chromeでopacityが効かない
Google Chromeで、hover時にopacityが効かない現象に遭遇したのでメモ。 サンプルコード HTML <a href="#"> <div class="image"><img src="rabbit.jpg" width="100" height="73" alt="" /></div> <p>オーダーは亀ですか？ Is the order a turtle?</p> </a> CSS a:hover { opacity: 0.6; } Google Chromeでopacityが効かない時のデモページ 解決方法 aタグではなく、aタグ内の要素に対してopacityを指定することで解決しました。 CSS a:hover .image, a:hover p { opacity: 0.6; } 解決方法のデモページ 他にも、aタグをブロック要素に変更でも現象は回避できました。
CSSのみで実装するシンプルなドロップダウンメニュー - NxWorld
JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。 最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。 はじめに 以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 <ul> <li><a href="#">nav</a></li> <li> <a href="#">nav</a> <ul> <li><a href="#">sub nav</a></li> <li><a href="#">sub nav</a></li> <li><a href=
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説 初心者向けにCSSだけで矢印のアイコンを作る方法について解説しています。画像を使わずにCSSで矢印を作れるようになればサイト制作にも役立つはずです。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自
コンテナーの幅より広がったエリアをcalcでつくる - Qiita
タイトルがなんともわかりづらいけど、キャプチャのような表現をする話。 記事の引用とかコードの表現でこういう見た目にしたいことがある。 やり方は色々あるけど、これをCSSのcalc()でやってみる。 記事全体を包括している親要素の幅が決まっていて、一部のブロック、セクションだけ左右ぶち抜きたい。 マークアップとCSSはこんな感じ。 <article class="entry"><!-- width: 44em; --> <h1 class="entry-title">セロ弾きのゴーシュ</h1> <div class="entry-body"> <p>...</p> <div class="dialogue"><!-- ぶち抜きたいところ --> <p>...</p> </div> <p>...</p> </div> </article>
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.
CSS 途中で要素を画面いっぱいに広げる | テクニカルノート
ヘッダーや、フッターを画面いっぱいに広げる場合、widthを100%に指定すればいいだけですが。 mainの途中で背景だけ目一杯に広る場合、mainを2つに分けて、間に目一杯の枠を作る。なんてことをしてた時期がありまして。こんな感じで。 非常に効率が悪かったわけですが、できればこんなふうにmainの途中でも画面いっぱいに広がる枠を入れられたら楽ですよね。こんな感じで。 で、どうするかというと、意外と簡単で、広げたい部分をdiv要素で囲って、 幅方向のmarginにマイナスの値を設定して、マイナス分を、paddingで補います。 margin:0 -200%; padding:0 200%; とすれば、いいわけですが、それだけだと、はみ出た部分まで表示しようとスクロールバーが出てきてしまいます。なので、bodyに overflow-x: hidden; を適用すればいいのですが、なぜかiPh
itti-c.com
itti-c.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
ノートのように罫線(下線)を引くデザインの作り方 [ホームページ作成] All About
ノートのように各行に下線を引くデザインを作る方法 (画像使用) ノートのように、各行に下線を引くデザインを作ってみましょう。スタイルシートと画像を使うことで、下記のようにノートっぽく見えるデザインが簡単に作れます。 2009年7月13日 ■ノートのような罫線を引く 「下線を引く」というと、text-decorationプロパティに値「underline」を指定したり、border-bottomプロパティを使ったりする方法を思い浮かべる方々も多いでしょう。 しかし、text-decorationプロパティを使う方法では、文字のない箇所には下線が引けないため、あまりノートのようには見えません。 また、border-bottomプロパティを使う方法では、ボックスの最下部に下線が引かれるだけで「各行」には引かれないため、まったくノートのようには見えません。 ここでは、スタイルシートで下線を引いてい
![ノートのように罫線(下線)を引くデザインの作り方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe857d3f84d4bbeaeb3be938528d9c953a8f6e56/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F4%2F0%2F0%2F3%2F201609241417%2Ftopimg_original.png)
font-size
相対サイズ指定 smaller より小さく larger より大きく 相対サイズ指定とは親要素のフォントサイズを基準に対する比率で指定する方法です。たとえば親要素のフォントサイズが "medium" の場合に、当該要素に "larger" を指定すると、そのフォントサイズは "large" が指定されているものとして解釈します。あるいは当該要素に "smaller" を指定すると、そのフォントサイズは "small" として解釈します。 font-sizeプロパティの実装状況 IE ◯：IE6は絶対サイズの7段階ある内の1段階大きく表示されるキーワードごとに標準準拠（standard）モードでは1.2倍、後方互換（quirk）モードでは1.5倍の比率で表示する。また、IE6,7ともに12px以下のフォントサイズにfont-familyで和文フォント指定が含まれていない場合、1px相当フォン
CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法 | colori
CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。 ブラウザによって異なる、フォントサイズの境界 例えば「font-size:70%」というふうに指定して、Internet Explorer 6とFirefox2.0で見てみたページが以下のようなものです。 ※ページはxmlタグつきのXHTML1.0 Strictで作成、つまりInternet Explorer6は下位互換モードで表示されていますが、標準モードでも同じサイズで表示されます。 あきらかにFirefoxで表示されたページのフォントサイズが小さくなっていることがわかります。 このように、フォントをパーセント指定した場合は、その数値によってフォントサイズを規定する境界に微
作ろうiモード：iモードブラウザ2.0対応i-CSS2について | サービス・機能 | NTTドコモ
i-CSS2はiモードブラウザ2.0以降で利用できるスタイルシートで、CSS2、WCSSに準拠しています。 i-CSS2を使用するには次の3つの方法で記述します。 link要素により外部ファイルを読み込む。外部ファイルは1ページあたりの読み込みサイズに含まれ、最大ファイルサイズは500KBです。 例: <link rel=”stylesheet” href=”aaa.css”> style要素に記述する。 例: <style type=”text/css”>body {color:red;}</style> 各要素のstyle属性に記述する。 例: <body style=“color:red;”> 属性名、値、疑似クラスは、半角大文字・半角小文字の区別をしません。ただし、-wap-input-format属性の値についてのみ半角大文字・小文字の区別を行います。 スタイル適用の優先順位につ
CSSで複数のclassを指定する | Takazudo Clipping*
(X)HTML上で、複数のclassを指定できるのは結構有名な話です。 <p class="Paragraph1 Right">段落</p> みたいに。 しかし、これをCSS上でもできるのを知ってましたか？ 自分は最近知りました。 こんな感じで。 .Navigation{ padding:5px; margin:0 0 10px; border:2px solid red; } .Navigation li{ padding:0 0 0 10px; background:url(arrow.gif) no-repeat 0 0; } .Navigation.R li{ float:right; } .Navigation.Popup li{ background-image:url(newwin.gif); } .Navigation.External li{ background-
スタイルシートリファレンス（目的別）
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
DoCoMoのCSSとXHTMLまとめ | 村式開墾日記
DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています) CSSの名称、記述
iモードHTMLとiモードXHTMLを正しく切り替える方法 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
最近発売されているドコモの機種（FOMA）のブラウザにはたいてい iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。 例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、 iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。 これは、携帯電話が機能向上するのと並行して、 携帯に対応したHTMLもバージョンアップを繰り返すためです。 このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。 さて、携帯サイトを作成する際のポイントについてふれますが、 多くの方が勘違いされているのは、 ドコモの機種が割と新しい機種、つまりX
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】子要素を親要素からはみ出させる方法 | Code Pocket
めしおのアフィリエイト教材レビューブログ
HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど