CSS(258)

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

CSS:可変のレイアウトに対してabsoluteで真ん中配置を行う

HTML例 <div class="popupWrap"> <a href="#">ポップアップを開く</a> <div class="popupBox"> ポップアップの中身 </d... 2016年9月8日
かしこ さんのアバター 57views

ドロップダウンメニューを作りたかった

よくあるドロップダウンメニューを作りたくて、いろいろ参考にさせていただきながら作業 ■ html <ul id="main_menu_list"> <li class="large_menu">メニュー1... 2016年9月5日
harada さんのアバター 193views

CSSだけでプログレスバー型のメニューを表示する

最近良く見るこういう形の、フォームなどの表示形式は、なんていったらいいんでしょうね。 表示サンプル HTML <ol class="progress-meter"> <li class="progr... 2016年9月1日
Yukimi Sato さんのアバター 428views

【jQuery】ハンバーガーアイコンを開閉時に変化させる【Bootstrap】

参考:3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる HTML <a href="#" id="panel-btn"><span id="panel-btn-icon"></span&g... 2016年8月18日
Yukimi Sato さんのアバター 958views

【CSS】Bootstrapで組んだナビメニューをタブレットでもスマホ表示にする

レスポンシブデザインでつきまとうナビメニューの形と幅の悩みですが、Bootstrapはデフォルトではタブレットの表示がスマホと同じようにたたまれたメニューにはならないので、それを解決するCSSです。 iPadでBootstrapのnavb... 2016年8月17日
Yukimi Sato さんのアバター 140views

iOSでposition:fixedを指定した時に、他の要素が突き抜けているとヌルヌル動く

レスポンシブで作っている時に、他の要素に幅指定が入っていて、尚且つ横幅を突き抜けている時、overflow-x を指定していても、 position:fixed を指定してあるheaderがヌルヌルとスクロールする度に上にちょっとずつ動き... 2016年8月15日
nissy さんのアバター 57views

WordPress スタイルシート読み込み

まず、htmlタグを利用してのスタイルシートの読み込みは以下の通りです。 <link rel="stylesheet" id="適当なid" href="ファイルのpath" type="text/css" media="all" ... 2016年7月28日
Yukimi Sato さんのアバター 65views

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

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

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 さんのアバター 83views

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

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

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

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

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

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

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

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

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

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

吹き出し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 さんのアバター 218views

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

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

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

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

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

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