CSS(259)

259follower
@iwasaki さんのアバター 15views

レガシーなプロジェクトのJavascriptとCSSに対してwebpackを使う

レガシーなのでCSSは純粋なCSSとして出力したい ExtractTextPluginを使います。 module: { loaders: [{ test: /\.scss$/, loader: Ext... 2017年11月14日
harada さんのアバター 46views

flexboxで要素を真ん中に寄せて並べる

justify-content: center;とjustify-content: space-between;を指定する場合の例 デモはこちら CSS .flex1 { display: flex; display: -we... 2017年5月12日
harada さんのアバター 34views

CSS:background指定をまとめる場合の注意

.bg { background-color: rgba(0, 0, 0, 0.3); background-image: url("../img/bg.jpg"); background-repeat: no-repeat; ... 2017年5月11日
harada さんのアバター 1,349views

Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる

以前はWOW.jsを利用して簡単にアニメーションを導入するという記事のように、WOW.jsとAnimate.cssでアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。 そのためjQue... 2017年5月1日
harada さんのアバター 364views

CSS:rgba指定を使わずに背景画像を透過する

<div class="bgimage">というブロックに透過した背景画像を重ねたい場合は以下のようにCSSを記述します。 rgbaを重ねる方法だと、背景画像の上にさらに透過した背景画像を重ねるのが難しいため以下の方法を利用しま... 2017年4月20日
harada さんのアバター 60views

CSSでテキスト選択中の背景色と文字色を変更する

::-moz-selection { background-color: #f06292; color: #fff; } ::selection { background-color: #f06292; color: #f... 2017年4月20日
Yukimi Sato さんのアバター 400views

IE11とWindowsEdge用CSSハック

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

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

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

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

こんにちは、ゴトーです。 ロゴにSVGアニメーションを利用しているサイトを最近たまに見るので、試したところJSを使わず簡単にできたのでご紹介します。 「HTMLでSVGを描画する」でSVGの描画について書きましたが、この描画方法にCSS... 2017年1月19日
harada さんのアバター 2,604views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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