CSS(253)

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

IE11とWindowsEdge用CSSハック

IE11 @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .クラス名 {     セレクタ } } Windows Edge @supports (-m... 2017年2月21日
harada さんのアバター 16views

スマホでのスクロールがスムーズではないときに設定するCSS

webページをスマートフォンで開いたときに、表示はおかしくないのにスクロールが遅いというか突っかかるような感じがするときは、以下のCSSをまずは設定してみるといいようです。 html { -webkit-overflow-scroll... 2017年2月2日
goto_jp さんのアバター 59views

CSSだけでSVGをアニメーションさせる

こんにちは、ゴトーです。 最近ちょくちょくロゴにSVGアニメーションを利用しているサイトを見るので、試しにやってみたところJSライブラリなど使わず簡単にできたのでご紹介します。 「HTMLでSVGを描画する」でSVGの描画について書きま... 2017年1月19日
harada さんのアバター 49views

Webページを印刷するときの余白をCSSで設定する

webページを印刷する際指定しないと結構大きな余白がとられてしまいますので、余白なしに設定したい場合などは以下のように設定します。 @page { margin: 0; } ただし、印刷時の動作はブラウザによって大きく異なるため十... 2017年1月5日
nissy さんのアバター 42views

wkhtmltopdfでPDF変換した際に文字が重なる

htmlで作成されたページを簡単なコマンドでpdf変換してくれるwkhtmltopdfというツールを使っていたところ、 文字が重なるバグが生じたので解決方法をハックに残しておきます。 原因なのですが、今回の場合はletter-spacin... 2016年11月27日
huruhurupyotr さんのアバター 25views

phpで改ページの処理がよくわからない!

僕はphpを主に触っているのですが、改ページをどうやって行っているのか、ということがしばらく分かりませんでした。僕の触れているプログラムでは、改ページはphpを見ているだけでは解決しない問題でした。 改ページのプログラムはcssの方だっ... 2016年11月22日
goto_jp さんのアバター 159views

MS Edge で placeholderが消えてしまう問題の解決

Windows10のEdgeでフォームを確認したら、inputフィールドからplaceholderが消えてしまっていた。 同じくWin10のIE11で確認したらplaceholderがちゃんと表示されていたので、何退化しとんじゃと思って対... 2016年10月31日
Yukimi Sato さんのアバター 188views

jQueryでスクロールしたら上からヌルっと出て来るヘッダーを実装する

参考:【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法 – North-Geek 参考サイトだと、ヘッダーはトップイメージの下にあり、そこが基準になっていますが、今回は下記のようにしました。 ... 2016年10月24日
Yukimi Sato さんのアバター 25views

Safari(〜9系)でのcssアニメーション指定

10系(最新)ではanimationで全部纏めて記述できるのですが、〜9系は -webkit 接頭語とそれぞれを指定してあげる必要があります。 -webkit-animation-name: topBtn; -webkit-animati... 2016年10月20日
Yukimi Sato さんのアバター 62views

【CSS】複数読み込んでいたCSSを1つにまとめる

PageSpeedさんに「読み込むリソース多いよ!」と怒られた?ので、CSSを雑に1つにまとめてみました。 纏めたCSS bootstrap.min.css bootstrap-responsive.min.css odome... 2016年10月13日
かしこ さんのアバター 47views

jQuery と html と css で複数選択可能なボタンを作る

タイトル通り、複数選択可能なボタンを作ろうと思い作成しました。 とりあえず、ボタンを押したら今押されているボタンのIDを取得して画面に表示させています。 ※ 細かいバグがあるかも ■ index.html <!DOCTYPE ... 2016年10月4日
goto_jp さんのアバター 46views

iOSでtextareaの余白が大きくなる

input[type=text], input[type=password], textarea { 〜 padding: 15px; 〜 } 上記のようなCSSでフォームパーツに一括して余白を指定していたところ、PCでは... 2016年10月4日
harada さんのアバター 72views

CSS:背景の画像をぼかして表示する

今回はぼかし+半透明の色を重ねるということをやりたかったのですが、それはできませんでした。。 ひとまず背景の画像をぼかす方法のみメモしておきます。 HTML例 <div class="bg1"> <p>上に載... 2016年9月29日
goto_jp さんのアバター 412views

GulpでCompassのビルドとCSSの最適化&圧縮する決定版

前提 現在GulpでSassやLessやCompassを使っている人向け より最適なCSS出力をしたい人向け 下記のディレクトリ構造を仮定 project - scss - css - .csscomb.json - config.... 2016年9月21日
Yukimi Sato さんのアバター 157views

Odometerを実装してみる

Odometer というカッチョイイJSを実装してみました。 仕様 クリックしたら数値変わる クリック用のナビゲーションつけよう 実装 HTML <ul> <li id="month" class="se... 2016年9月9日
harada さんのアバター 18views

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

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

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

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

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

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

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

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

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

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