CSS(251)

251follower
Yukimi Sato さんのアバター 36views

マウスオンすると中央から線が伸びてくるCSS

SCSSでの記述になります。liの擬似クラスを利用してborderを表示させています。 ul { margin: 0; padding: 0; li { position: relative; margin:... 2016年7月27日
@iwasaki さんのアバター 50views

inputのpattern指定による赤枠を解除する方法

html5になってからformタグが強化されていますね。 例えばクレジットカード番号などの入力を制限するときにpattern属性を指定することで入力パターンを検証してくれるようになります。 実際の入力値がこのパターンに従わない場合、ブラ... 2016年7月27日
@iwasaki さんのアバター 12views

olタグの開始番号を指定する

順番リストのolタグの開始番号は以下のように指定可能です。 <ol start="4"> <li>説明4</li> <li>説明5</li> </ol> ... 2016年7月14日
harada さんのアバター 66views

Firefox50以降は box-sizing:padding-box が無効になる

現在Firefoxの最新バージョンは47なのですが、Firefox50以降からCSSのbox-sizingのプロパティpadding-boxが効かなくなるようです。 padding-boxはもともとFirefoxでのみ有効な値で、paddi... 2016年6月22日
Yukimi Sato さんのアバター 26views

【印刷】続・中身が無いのに余分なページが出てしまう時【CSS】

【印刷】中身が無いのに余分なページが出てしまう時【CSS】 だけではChromeとIE11で改善できていなかったので続編です(震え声) html, body { height: auto; } heightに100%と指定が入っている... 2016年5月27日
Yukimi Sato さんのアバター 34views

【印刷】中身が無いのに余分なページが出てしまう時【CSS】

はみ出る要素が全く見当たらないのに、余分な真っ白ページが出来てしまうううううううう と、なった時に確認しておきたい箇所。 コンテンツ用のCSS 面倒だなって思ってコンテンツ用のCSS読み込んでいませんか? 印刷には印刷専用のCSSだけ... 2016年5月19日
高瀬 裕介 さんのアバター 33views

bootstapを使ったコンテンツで見出しの右にボタンを出す

<div class="clearfix"> <div class="pull-left"><h1>見出し</h1></div> <div class="pull-r... 2016年3月17日
harada さんのアバター 531views

CSSで見出しに四角「■」を付ける

以下のCSS例だと下線もつけています。 ↓以下の様な感じです。(四角のサイズは自由に変更できます) ■ みだし ───────────────────────────────────────────── h3 { bord... 2016年3月16日
Takuro Hirayama さんのアバター 163views

吹き出しCSS(二人対応)

こちらの記事 に出てくる会話部分のCSSです。 ほぼ参考サイトのままですが、文脈上、自分側の吹き出しが2人の部分があって、 参考サイトのCSSでは対応できなかったので、ちょっと追加しました(ほげほげ-doubleのやつ)。 相手側のふきだ... 2016年3月14日
@iwasaki さんのアバター 9views

OpenSocialで外部のCSSを読み込む方法

<Content type="html" view="home"><![CDATA[ <link type="text/css" rel="stylesheet" href="https://... 2016年3月9日
harada さんのアバター 143views

Chromeでdatalistを利用するとhoverで表示される三角を非表示にする

‘datalist’タグを利用してテキスト入力フォームに入力候補を表示する際に、Firefoxはいいのですが、Chromeでどうしても三角アイコンが表示されるという現象を確認しました。 selectと同じようにap... 2016年1月27日
harada さんのアバター 76views

写真の1枚目と2枚目にcssでオビをつける

サンプルはこちらです。 CSS例 .img_list li { display: block; float: left; height: 93px; margin: 6px; padding: 0... 2015年12月28日
harada さんのアバター 10,383views

CSSで背景画像に半透明カラーを重ねる

写真の上にテキストを重ねて読ませたい場合、写真がそのままだと読みにくいときがあります。 そこで画像の上に黒や白の半透明カラーを重ねることで、画像全体の色彩が統一され、テキストを読みやすくすることができます。 CSS例 .intro ... 2015年11月9日
harada さんのアバター 34views

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

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

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

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

display:none/visibility:hiddenの違い

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

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

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

visibility と display

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

placeholderにスタイルを適用する

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

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

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