CSS(258)

258follower
harada さんのアバター 64views

WordPressの管理画面で表示されるリンク後の青枠を消す

リンク後に青く表示される枠線は、WordPressの管理画面で読み込まれている以下のcssによって表示されているものです。 a:focus, a:focus .media-icon img { color: #124964; bo... 2015年10月26日
harada さんのアバター 877views

WebページをA4サイズで印刷するようにCSSで指定する

出力する際の用紙のサイズの指定をCSSで行えるようです。 @page { size: A4; } とはいえ用紙のサイズまで指定するのはかな限られた状況になりますね! ... 2015年10月8日
daiki21 さんのアバター 141views

display:none/visibility:hiddenの違い

display:none自体は、if文などでよく使っていましたが、似たようなニュアンスのvisibility:hiddenも使えます。 visibility:hidden display:noneは指定したidなどのレイアウトもスペース... 2015年9月14日
kayama さんのアバター 123views

WEBデザインの参考になるサイト

サイトを作る時、html・cssやjQueryのプラグインの使い方を紹介している記事を参考にすることがよくあります。  最近気になっているのがThecCodePlayerです。最近は更新が止まってしまっているようなのですが、モダンUIの実... 2015年9月9日
mrktanaka さんのアバター 21views

visibility と display

CSS の visibility プロパティは 、全要素が持つプロパティです。 visible, hidden, collapse の3つの値を持ちます。 hidden にすると要素を隠し、要素があるはずだった領域はそのままになり... 2015年9月8日
harada さんのアバター 16views

placeholderにスタイルを適用する

以下のように指定します。 input::-webkit-input-placeholder { line-height: 20px; } input:-moz-placeholder { l... 2015年8月31日
Yukimi Sato さんのアバター 151views

【IE8】「overflow-x: auto;」は互換モードを変更すると縦スクロールが出る

以前の対応の残りだったのですが、 overflow-x: auto; この指定だと普通は横スクロールの制御に関してなんですが、何故か互換モードを変更したIE8だと縦スクロールが表示されます。 元々IE専用指定なので、使わない場合はサク... 2015年8月12日
Tetsuro  Aoki さんのアバター 4,560views

Bootstrapのnavbar-brandを中央寄せする

navbar-brandを中央寄せする方法です。 Webで調べると結構出てくるのですが、微妙に中央からずれていたりスマートフォンだとメニューボタンが効かなくなったりといろいろ不具合があったのでそれらを解決するcssを書いてみました。 .n... 2015年8月11日
Yukimi Sato さんのアバター 60views

【CSS】基本的な命名規則【落とし穴】

すごく基本的なことなのですが、今日ド忘れしてやらかしたのでメモ… 4カラムの時〜という指定でclassを指定しようとした時に、素直に 4column と付与してしまったんですが、CSSは数字から始まるクラスは認識されません…! 正... 2015年8月10日
Yukimi Sato さんのアバター 566views

【IE8】selectの幅制御に「max-width」は効かない

IE8でselectの中身が長文だった場合、場所によっては幅が大きくなりすぎるので、対処しようと、 select{ max-width : 300px; } と設定したところ、同じように大きくなりすぎていたFireFoxでは効いても... 2015年7月30日
Yukimi Sato さんのアバター 43views

【IE】Sprite画像でアイコンを指定する時は高さはfontサイズと同じ高さで指定する

IE11でSpriteとして指定したアイコンがボヤけてしまう問題で、fontサイズを調整したところ、うまくいったのでメモ。 ポイント font-sizeが13pxの時は高さ13pxの画像をspriteとして指定する これじゃそもそ... 2015年7月27日
Yukimi Sato さんのアバター 104views

WindowsEdgeに響かないChrome用CSSハック

Chrome用に記述していたCSSハックがWindowsEdgeにも響いていたので調整。 _::content, _:future, XXXXX:not(*:root) { ←XXXXXのところにセレクタを指定してください font... 2015年7月21日
harada さんのアバター 6,010views

CSSで印刷する向きを指定する

印刷用のCSSには各ブラウザで差異がありますので、利用する際は都度確認いただくのがいいと思います。 chromeとFirefoxで確認したところ、chromeでのみ適用を確認できました。 縦向きで印刷する <style type=... 2015年7月7日
Yukimi Sato さんのアバター 1,598views

IE11用CSSハック

@media all and (-ms-high-contrast:none){ *::-ms-backdrop, .thumbnail { background: url("XXX.png") top left no-repeat... 2015年7月3日
Yukimi Sato さんのアバター 194views

CSSで画像サイズ関係なく正円にする

border-radius: 100%; 画像やサムネイルサイズに関係なく使えます。 ... 2015年6月25日
Yukimi Sato さんのアバター 256views

縦横比を変えずに固定サイズのサムネイル表示

HTML <a href="#"><div><img src="image01.png"/></div></a> <a href="#"><div><... 2015年6月22日
harada さんのアバター 297views

CSSだけで画像をモノクロ表示にすることはできるが印刷には表示されない

以下のクラス指定などをモノクロ表示にしたい画像につけることで、モニター上でカラー画像をモノクロ表示にすることができます。 .grayscale { filter: gray; -webkit-filter: grayscale(1... 2015年6月22日
harada さんのアバター 319views

CSSで印刷の改ページを制御する

Webページを印刷する際に、何も指定していなければ適当な位置で改ページされて表示されますが、以下の指定を行うことでCSSで改ページを制御することができます。 CSS例 .printBlock { page-break-after: al... 2015年6月16日
harada さんのアバター 573views

フォントを綺麗に表示するCSS

AppleやGoogle、slackのフォントが綺麗に表示されているなあと思ってCSSを見ていたら以下の指定で滑らかな表示になるようです。 対応環境はまだ少ないですが、取り入れてるサービスを見ると今後スタンダードな指定になっていきそうですね... 2015年6月12日
Yukimi Sato さんのアバター 660views

IE8に効かない「::after」という指定方法

IE8用CSSハック と一緒に使うと幸せになれるかも? css3の指定として「:after」があります。 ただ、このままだとIE8では中途半端に表示されてしまい、調整でモダンブラウザにも影響がいってしまったりもしますが 「::after... 2015年6月12日