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を使用する際の問題点は、周りのエレメントに影響を与えないとい
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ
![[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e06dab83915ff3fa91a0d356ebe7f551b51c01f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012101.png)
CSSでの表見出しの均等割付 (css3版) - 鍋の底
NSEG Advent Calendar 2015 - Adventarにエントリを書きたいと思っていたら、ネタが降ってきたので急いで書きました。 というわけで12/23のエントリになります。 さて、ワープロなどにある均等割付を、Web でも表現したいという需要があります。 このとき css では text-align に justify を指定すると思います。 この文章のように複数行ある場合には、効いているように見えますが、 table の見出しセルを均等割付をしたい場合には、うまくいきません。 Webでしらべても「text-align justify 効かない」がサジェストに現れるくらいには、効かないもののようです。 なぜこうなるのか、文章に対する均等割付から考えてみましょう。 均等割付の際には、段落の最後で、均等に割り付けてしまうと、むしろおかしくなります。 そのためか、段落の最後で
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
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 には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント
Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
jQueryで入力フォームの上にテキストを表示する「プレースホルダ（placeholder）」を作ってみる｜BLACKFLAG
入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ（placeholder）」。 入力する際の注意書きや入力例などを予め表示しておくことで、ユーザーに優しいUIにすることができます。 HTML5ではplaceholder属性という、新たな属性として簡単にプレースホルダを表示できるようになっていますが HTML5に対応していないブラウザではJSなどを使って実装しなくてはいけません。 このプレースホルダを表示するjQueryプラグインも多々ありますが シンプルなスクリプト構成で実装できないか、試しにやってみたので紹介してみます。 まずは実装サンプルから。 下記の入力フォーム（INPUTテキスト、パスワード、テキストエリア）にフォーカスすると 表示されているテキストが消えます。 入力フォームからフォーカスが外れた際に、 フォーム内に何か任意のテキストが入力されていると プレー
文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚
CSS3のWebフォントを使ってみよう
EOF形式以外のフォーマットへ変換したい場合には、「@font-face Generator」がお勧めです。さまざまなオプションがあり、文字を限定できるサブセット化の機能もついていますが、その分、ttf2eotより多少時間がかかります。 WOFF形式を優先して複数のフォーマットを指定する 先述したように、WOFF形式のフォントはWeb用に開発されており、データが軽く、著作権情報を盛り込むことができるというメリットがあります。Webフォントを使う上で、これから普及してくるフォーマットだと思われます。現状、ひとつのフォント形式だけで主要ブラウザのすべてをカバーすることはできませんが、WOFF形式を優先して指定しておくのが良いでしょう。 @font-faceのsrcディスクリプタでは、複数のフォントファイルをカンマで区切って指定できます。優先度は記述順になっており、その中から利用できるものが選択
IE8以前でCSS3の表現を使うには
IEの独自拡張filterプロパティでCSS3を再現 前回紹介したCSS3の機能は、Internet Explorer（以下IE）8以下ではサポートされていません。今回は、クロスブラウザなテクニックとして、IEの独自拡張であるfilterプロパティを使ってCSS3の表現を再現する方法を紹介します。 filterプロパティは、テキストや画像を透過させたり、影を付けたり、色を変えたりと、さまざまなフィルタ効果を指定できるIE独自のCSSプロパティです。これらのフィルタ効果を利用すれば、画像やJavaScriptを利用せずに、CSS3のようなドロップシャドウやグラデーションなどの表現ができます。 filterプロパティには、IE 5.5以上で使用できる効果と、IE 4以上で使用できる効果があり、書式がそれぞれ異なりますので注意しましょう。本稿では混同しないように、より広い機能に対応している、IE
IE9でグラデーションを実現する方法
CSS3 Wizardy is what you need to create the kind of Web site or Web app to really stand out. IE9はこれまでリリースされたIEシリーズのなかではもっとも標準規約に準拠したブラウザになる。特にCSS 2.1への準拠率はほかの主要ブラウザを抜いてトップレベルにあり、標準規約への準拠を進めるMicrosoftの姿勢をよく表している。しかし、Webデベロッパの多くはすでにCSS3で実現される機能に目を向けている。CSS3の機能を活用すると実現したいデザインを今までよりもスマートに表現できる。また、レンダリング処理をJavaScriptからCSSへ振り替えることで、ハードウェアレンダリングの機能を活用しつつ、JavaScriptを別の処理に利用することができるようになるなど、高速化テクニックとしても欠かせな
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita
CSS Arrow Please - By Simon Hoejberg - @shojberg
CSS：オンマウス（hover）で画像をフェードする | design Edge
