https://handywebdesign.net/2017/09/css3-calc/
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ
デモページ：ボックスの高さを拡張 以下は、これらの5つの実装方法と解説を意訳したものです。 Method 1: borderとoutline Method 2: 疑似要素 Method 3: box-shadow Method 4: div要素の追加 Method 5: border-image [ad#ad-2] Method 1: borderとoutline borderプロパティとoutlineプロパティを併用します。 この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。 .one { border: solid 6px #fff; outline: solid 6px #888; } この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないとい
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス
スタイルシート（CSS）はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 では li にスタイルを適用すればクラスや ID を個別に指定しない限り全ての li にスタイルが適用されます。しかし、CSS3 ではクラスや ID を指定せず1番目の li、最後の li、偶数・奇数番目の li、というように細かなスタイルの指定ができるようになりました。 最初、最後、偶数、奇数番目の要素にスタイルを適用する方法というのは基本なのでよく見かけますが、要素の2番目以降とか2番目以外にスタイルを適用する方法に意外に手間取ったのでメモしておきます。 要素の2番目以降にスタイルを適用 上の画像を例に2番目以降の li 要素にスタイルを適用する方法を紹介します。 2
楽天ショップでページの横に固定で表示されるタブバナーの作り方 | ハカセの研究室
なんだか最近楽天のショップで良く目にするこれ。（このページの右下にもあります）名前は良く分かりませんが、タブみたいな形でページの端っこに固定されていて、スクロールしても隠れる事無くずっとそこにあります。今回はコレの作り方を解説してみます。もちろんコピペでいけちゃいます。若干邪魔な気もしますが、これならどんな時にも表示されていますので「目に入る」事は間違いないはずですので、ここぞと言う時にイチオシの商品などのバナーとして使えば、店舗全体のアクセスをかなりの割合でそのページに導けるかも知れません。 しかし、何事もやり過ぎは厳禁です。イチオシバナーが10個もあると結局どれがイチオシなのかお客様は分かりません。「これも売りたい」「あれも売りたい」「こっちだって売りたい」などと、売り手のエゴだけが先行すると、バナーがどんどんでっかくなっていったり、アニメーションgifのバナーがめちゃくちゃチカチカし
Navigation Animation
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
<a>タグをクリックして何も起きないようにする、ということをしようと思います。 一番簡単な方法は、CSS3の pointer-events を利用することですが、CSS3なのでIEでの動きは微妙。 スマフォサイトなら気にせずに使えるのかなという印象。 pointer-events:none でリンクを無効化する <a>タグのリンクを無効にするには、CSSファイルで以下のように記述します。 a.nav { pointer-events: none; } 上記例だと、<a class="nav" href="#"> のリンクをクリックしてもアクションが起きません。 応用としては、CSSで pointer-events:none とリンクタグを無効化することにより、「:target疑似クラス」を利用したLightbox 的な動きをさせるなんてことに利用できそうな印象です。 IEでの利用は厳しそう
![[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0bf40bdc8b9b0d0e326ea23c0a5a97c9c29c889/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2012%2F12%2Fcss.png)
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
word-wrap－スタイルシートリファレンス
word-wrapプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、 表示範囲内に収まりきらない単語がある場合に、単語の途中で改行するかどうかを指定するに使用します。 尚、日本語の単語の途中で改行させたくない場合には、word-breakプロパティを使用してください。 word-wrapプロパティは、CSS3で標準採用されるかもしれません。 ■値 normal 単語の途中で改行はしません。この場合、必要に応じて表示範囲を拡大します。 break-word 必要に応じて単語の途中で改行します。 スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample1 {width:150px; background-color:#99cc00; word-wrap: normal;} p.sample2 {width:150px; ba
CSS セレクタに関するおさらい 2 | WWW WATCH
前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo-classes) E:root ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、 :root { margin:0; padding:0; } とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。 E:nth-child
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita
セレクタ｜CSS HappyLife ZERO