overflow:hidden;してるのに、はみ出る #CSS珍百景
はい、[CSS珍百景 Calendar 2014](http://www.adventar.org/calendars/341) 25日目の記事です。 途中書いてませんが、25日の記事をとりあえず。 親要素で **overflow:hidden;** を指定して、子要素に **-webkit-filter: blur(10px);** した時に、子要素のボケた部分が、親要素からはみ出てしまうアレです。これは、Safari 7.1.2や、iOS8.1のSafariで再現します。Chromeでは起きません。 ## 検証コード /*css*/ div { width: 100px; height: 100px; overflow: hidden; } div img{ -webkit-filter: blur(10px); } デモ1 デモ1をChromeで見た時のスクリーンショットです。 次に
[CSS]フォームの input type=file のボタンデザインを変更する方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。 テキストフォームやラジオボタンなどは、CSS 3のプロパティを利用すればかなり自由にデザインを変更できますが、ファイルアップロードボタンのデザイン変更はかなり難しいので、非常に使えるカスタマイズです。 オリジナルボタンのデザインサンプル ボタンのデザインサンプルは以下の通りです。 .file { display: inline-block; overflow: hidden; position: relative; padding: 1em; border: 1px solid #dd0000; background: #dd0000; color:#fff; } .file input[type="file"] { opacity:
![[CSS]フォームの input type=file のボタンデザインを変更する方法｜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やJQueryでぼかしのエフェクトをかける方法を一通り試してみた | sounansa.net
どれが本命？CSSやJQueryでぼかしのエフェクトをかける方法を一通り試してみた 最終更新日: 2017/03/28 最近のデザインの流行から、写真をぼかしてキービジュアル画像の背景などに使う機会が増えてます。 どんなにヘボイ写真でも、かっこいいデザインに仕上がったりするからと、とりあえずぼかしておけと言われることも多いのでは。 高解像度の写真を買わなくても済むので安上がりですしね。 ぼかした写真をデザインに取り入れるとき、普通は写真をPhotoshopでぼかして、画像そのものを加工する手法が多いとは思います。でも、今回どうしても写真は加工しないで、WEBページ内でblur（ぼかし）のエフェクトをかけることが必須という大人の事情がありましたので、仕方なくいろいろ調べてみました。 やりたいことはこんな感じです。 blurをかけると、どんな方法でやる場合にも画像のふち（境界線）は、ぼやけ
IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット｜Web Design KOJIKA17
IEでCSS3の効果を出せる。 クロスブラウザ対応 CSSスニペット 2011-02-01 影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。 しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。 そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、 実用的なCSSのスニペットを紹介致します。 Opacity 指定したボックス自体の不透明度を変えることができます。 また指定した要素の下位の要素に対しても、効果が継承されます。 imgのロールオーバーなどの使い道があります。 Opacity Sample .opacity { opacity: .5; /* FireFox, Webkit, Opera */ -ms-filter: "progi
IE8でリンクへのopacityが効かない
IE8でaタグを透過させたときの挙動がおかしかったので、対応方法をメモしておきます。 テキストの場合 下記のような形でオンマウス時に透過させたときに、IE8で透過処理が効きませんでした。 HTML <a href="">テキストリンク</a> CSS a:hover { opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; zoom: 1; } IE8でリンクへのopacityが効かないのデモページ インライン要素だと効かないようなので、display:inline-block;を指定して対応しました。 CSS a { display: inline-block; } 今回はdisplay:inline-block;を指定しましたが、ブロック要素に変更でも問題ありません。 IE8でリンクへのopa
【CSS】Android端末のブラウザでmin-heightが効かなかったときの応急処置
Android端末（optimus LTE L-01D）の標準ウェブブラウザにて、CSS の min-height が効いていないことに気が付きました。Androidでmin-heightが効かない、という話やその対策が見当たらなかったので（IE6はたくさんあった）、CSSを諦めてJavaScript（jQuery）で応急処置をしたので、紹介しておきます。 目次 1. min-heightが効かない2. 対策3. おまけ：IE6向けの対策と共存できない スポンサーリンク min-heightが効かない Android 4.0.4 にアップデート済みの docomo Optimus LTE L-01D のデフォルトのブラウザで、CSSのmin-heightが効いていませんでした。 iPhone 5s の Safariでは普通に動作しており、気が付きませんでした。 対策 原因が単純にmin-h
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
![[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）](https://cdn-ak-scissors.b.st-hatena.com/image/square/bacd812f6000c78e30e028d375e68638a387b65a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090501-01.png)
IEで使おうと思ったら使えなかったCSSプロパティーやセレクタ
なるべくcssで表現したいなと思うのですが、そういえばIEで使えないんだった…となることがよくあります。 良く使うものでたまに引っかかるCSSプロパティー・セレクタをまとめてみました。 border-radius IE8以下で× 指定した要素の角を丸くするプロパティーです。 box-shadow IE8以下で× 指定した要素のまわりにシャドウをつける事ができるプロパティーです。 text-shadow IE9以下で× テキストにシャドウをつける事ができるプロパティーです。 background-size IE8以下で× このプロパティーを使えば、要素の中で背景に指定した画像のサイズを自由に変える事ができたり、縦横の比率を保ちながら拡大・縮小などもできます。 opacity IE8以下で× 指定した要素の透明度を指定することができます。 解決したい！ 解決したい場合には『CSS3 PIE』に
Bootstrap3移行ガイド
Bootstrapの基盤の主要部分について、より良く、より速く、より強力なWeb開発へのアプローチを含めて取得。 HTML5のdoctypeを使用（HTML5 doctype） Bootstrapは、HTML5のdoctypeの使用を必要とする特定のHTML要素とCSSプロパティを使用。すべてのプロジェクトの始めにそれを組み込む。 <!DOCTYPE html> <html lang="ja"> ... </html> ※英語のサイトの場合は lang="en"、日本語のサイトの場合は lang="ja" となる。 モバイル・ファースト（Mobile first） Bootstrap2では、フレームワークの主要な側面に、オプションのモバイルフレンドリーなスタイルを追加した。Bootstrap3では、最初からモバイルフレンドリーになるようにプロジェクトを書き直した。オプションのモバイルスタイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
IE8とIE9できれいに透過を適応させるCSS
http://www.css-lecture.com/log/css3/css3-border-radius.html
http://i26.jp/blog/iphone%E5%AF%BE%E5%BF%9C%E3%81%AE%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%97%E3%81%9F%E6%B0%97%E9%85%8D%E3%82%8A%EF%BC%8Fphonegap-web%E3%82%B5%E3%82%A4%E3%83%88/