Webページを作成していて、もっとも面倒な作業の一つがサムネイルの作成です。 大きい画像を無理矢理WidthやHeightで縮小して表示すると、読み込みが重い上に、ブラウザで見たときにジャギーが粗くなってギザギザで汚くなってしまいます。 しかし、あるCSS設定をすると、IEで画像の縮小表示がなめらかに表示されることが分かりました。 それがこの指定です。
大きい画像をキレイに縮小表示させるCSS - Weblogy
Webページを作成していて、もっとも面倒な作業の一つがサムネイルの作成です。 大きい画像を無理矢理WidthやHeightで縮小して表示すると、読み込みが重い上に、ブラウザで見たときにジャギーが粗くなってギザギザで汚くなってしまいます。 しかし、あるCSS設定をすると、IEで画像の縮小表示がなめらかに表示されることが分かりました。 それがこの指定です。
Luxebooth.com | Photo Booth Rental
The Premier Photo Booth Experience Unlimited printing, Black & White Glam Filters, premium backdrops, custom branding and more. Check Availability The Premier Photo Booth Experience Unlimited printing, Black & White Glam Filters, premium backdrops, custom branding and more. Rental Prices From $595 PHOTO BOOTH RENTAL services Nationwide Luxebooth.com is the premier photo booth rental company in Ora
placeholderの文字スタイルを変えるCSS
上が、cssで文字に装飾をくわえたinputで 下は、文字の装飾 + placeholderのスタイルも設定したinputです。 See the Pen custom placeholder by webdev (@webdev-jp-net) on CodePen.0 inputの文字にスタイルを指定すると IEでは、placeholderにも全く同じスタイルが適用されてしまい。 FirefoxやGoogle、Safariでは、placeholderの色はブラウザデフォルトのままで ボールドなどの装飾はIE同様に適用されてしまいます。 placeholderだけに別のスタイルを適用するときは ブラウザにあわせて3種類の指定をします。 ::-webkit-input-placeholder :-ms-input-placeholder ::-moz-placeholder 擬似要素をあらわ
【css】とっても簡単に画像を縦横中央寄せする方法
こんにちは。松田です。 最近はスマフォの案件を担当しておりhtmlとjavascriptばっかりいじっています。 先日、開発中のスマフォアプリで異常にメモリが消費される現象が起こり、これがタグの構造が深すぎると起きるのでは無いかという検証を行うために、出来るだけ少ないタグで画像を中央寄せさせたい場面がありました。 そこで弊社デザイナーのkamoさんに頼んだところ、なかなかカッコいい回答が返ってきたのでここに載せてしまいます。 まず画像をdivで囲みます。 <div id="wrapper"> <a href="https://www.asial.co.jp画像のパス &mode=1" class="popupimg"><img src="https://www.asial.co.jp画像のパス"></a> </div> <style> #wrapper { width:500px; hei
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
使われていないCSSを探す方法
Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい
[CSS]CSSだけでチェックボックス/ラジオボタンをクリックしたとき他要素のスタイルを変更する。 | fineder, LLC.
[CSS]CSSだけでチェックボックス/ラジオボタンをクリックしたとき他要素のスタイルを変更する。 2013/07/14 by long : comments チェックボックスやラジオボタンをクリックしたときに、他の要素のスタイルを変更するときJavaScriptを使うことはよくあるかと思いますが、CSSだけで実現させることも可能です。 Jsfiddleのソースはこちら。 このサンプルでは、チェックボックス・ラジオボタンをチェックしたときに、下のDIVのスタイルが変わるようになっています。 上段のラジオボタンではDVI2,DVI3のスタイルが同時に変わります（DIV3に値がない場合） コード <h1>Checkbox</h1> <input type="checkbox" id="toggle-1"><label for="toggle-1">クリックしてみてください。</label>
CSS3のtransition-timing-functionの動きをサンプルで理解しよう
<div id="transition">マウスを乗せてみてください <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out">ease-out</div> <div id="ease-in-out">ease-in-out</div> </div> transitionはまとめて指定しています。transition-propertyとtransition-delayは省略しています。省略した場合、transition-propertyは「all」、transition-delayは「0s」になります。 #transition{ width:510px; padding:10px 20px; background:#f1f6fc; bo
ふわっと下から浮き出るツールチップ
ふわっと下から浮き出るツールチップ：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（3）（1/3 ページ） 今回は、アニメーションするツールチップ（吹き出し）をCSSだけで作ってみたいと思います。 ツールチップを使えば、説明文などが必要な場合も画面をスッキリとさせられます。特に、Webサイトの訪問者にアクションを求める入力フォーム画面などでその効果を発揮します。例えば、購入手続き画面においては、何度も注文したことがあるリピート客にとって、入力方法の説明はもはや分かりきった“ノイジー”な情報ですね。こうした「知りたい人は簡単に情報を得られ、知っている人は目に触れずに済む」ようにするために、ツールチップは非常に有効な手段となります。ただし、注釈文をきちんと認識させるべき会員登録画面などでは、ツールチップで説明を隠してしまうのは望ましくないので、安易な乱用は避けたいもの
Twitter Bootstrapで作成したサイトを印刷しようとすると、リンクの後ろにURLが表示される問題 | Magicalog
Twitter Bootstrapで作成したサイトを印刷しようとすると、リンクの後ろに勝手にリンク先URLが表示されました。 ユーザビリティ的なもので表示されるようにしているのかもしれませんが、今回は「見た目そのまま」のサイトを印刷したいという要望だったので、とっちゃいます。 原因 bootstrap.cssもしくは、bootstrap.min.cssに記述されている以下のCSS bootstrap.cssの場合は183行目あたり @media print { /* 省略 */ a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* 省略 */ } 印刷時に、a要素でhref属性がある場合は要素の後ろにリンク先URLが挿入される、という指定
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
una.im | Introducing CSSgram: A CSS Library for Instagram Filters
CSSの様々な単位
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
A Single Div
How can I get a css pseudo element :checked to work in IE8 without Javascript?
3streamer.net