Qiita - CSSタグが付けられた新着投稿

IE11 で page-break-after:always; が効かない

SN

5/25 12:52

「page-break-after:always; が指定されているのに IE11 で改行されない」という現象があったので調べました。


先に結論


結論としては、「page-break-after:always; の後ろに何らかの要素がないと駄目」な模...

バックスラッシュ(\)と半角円記号(¥)

SN

5/25 11:04

メイリオやMS Pゴシックではバックスラッシュ(\)と円記号(¥)が同じ見た目に表示されるので注意が必要


ブラウザで表示する際に注意すること


テキスト


¥にする。

画面で表示される際は半...

CSSだけで既存のウェブサイトをレスポンシブデザインにしたい時に便利なブックマークレット作った

SN

5/24 18:20

低予算で既存のウェブサイトをスマホ対応してほしいという案件がたまたまあって、じゃあPC用のデザインはそのままにしてスマホ対応だけしましょうということになりました。

こういうお客さんに限ってウェブサイ...

CSS/Javascriptの不要な部分をさくっと洗い出す

SN

5/24 17:31

自分用メモも兼ねて。

見ているページ内で使われているCSSプロパティやJSの処理などを簡単に判別するため、Chrome 59からDevToolにCoverage機能が追加されているので使ってみます。

(2018/05/24現在はバー...

IE11ハック

SN

5/24 11:39

IE11にのみcssと適応

*::-ms-backdrop, .セレクター{
プロパティ
}

【CSS】BEMのデメリットについて

SN

5/23 22:43

BEMはとても便利で個人的に大好きなCSS設計です。しかし、他の記事では見たことがない(と思う)ようなデメリットを感じました。

それは、「別のBlockのElementを使い回せない」ことです。


index.html
<heade...

create-react-appでlocalのbackgroundImageが表示されない時の対処法

SN

5/23 12:28



背景

Reactのcreate-react-appを使って作業していました。ランディングページの上の方に背景画像をつけておしゃれにしようとして、cssのbackgroundImageでローカルの画像を表示しようとしたのですが、少しハマ...

アイコンタイプのよくあるローディング用SCSSモジュール(ちょっと汎用性あるやつ)

SN

5/23 12:04

こういうのよく使って便利ですよね


アイコン風に使えるLoading

ちょっとしたローディングステータスを表現したいときにお使いください。

See the Pen SCSS Loading Circle Animation by rider (@mtmtkzm) on ...

WebpackでCSSのbackgroundにSVGをdata形式で埋め込む

SN

5/22 11:54

Sassで下記のように定義しておきコンパイルすると

background-image: url('../file/logo.svg');


下記のようにするには

background-image: url("data:image/svg+xml,...");


svg-url-loaderを使うのが良い。y...

[CSS・JS] id・class名の頭文字が数字の時にスタイル適用・発火できない方へ

SN

5/22 11:15



現象


id=2cs3jk244k355vg3のような、class名が乱数生成されたものに対して、スタイルを適用したかったが、どうしても反応している様子がなかった。

コードは以下のような形


hello.html
<div id="2cs...

WEBサービスを配信したい!その①

SN

5/21 23:43



きっかけ


フルスタックエンジニアとして活躍したいから
アプリ開発関連のブログを作りたいと思ったから
副業(アフィリエイトというもの)



作るもの

ブログ・・・開発関連のブログ


計画(変更する可能性...

フルAMPのWordPressテーマを公開した件

SN

5/21 17:49

フルAMPのWordPressテーマ LIQUID AMP をリリースしました⚡




フルAMPとは?

全てのページテンプレートが、Googleの推進する AMP HTML で制作されています。


なぜフルAMPなのか

先日、Google東京オフィスで...

CSSでシンプルに水平スクロール(横スクロール)のリストを作る

SN

5/21 16:26



横スクロールのUI

個々最近、カード型のコンテンツが横に並んでいてスクロールできるUIをよく見かけるようになりました。

例えばAirbnbのWebサイトではこんな感じ。




CSSで水平スクロールを実装する

...

radio_buttonをbutton風スタイルにしてみよう【CSS】

SN

5/21 15:37



はじめに

チェックボックスだとデザイン的に少しチープに見えてしまうので、ボタン選択式にして少しリッチに見せる方法を、CSSを駆使してやってみようと思います。(divタグとか書くの疲れるのでslimで書かせて...

TweenMaxを使ったアニメーション例

SN

5/20 17:55



記事概要

TweenMax.jsを勉強した際にできた副産物達を、めちゃくちゃ雑な解説と共にとっておく為のメモ記事。

これからTweenMaxを勉強する人の助けになれば幸いです。誤りなどございましたらご指摘お願い...

遠近感のない立方体を CSS でつくる

SN

5/19 19:02



つくるもの




方法


長方形の右側と下側にひし形をくっつけているだけです。
ひし形は transform:skewY(45deg) などを使うと簡単にできます。


他に良い方法はないものでしょうか..


コード

<div cla...

素のjavascriptでCSS操作

SN

5/19 15:08



背景

以前作った

cssのみで立体な球体を表現

目で追従するやつをriotで実装

という記事を合わせれば、光の当たる点を動かせるのかと思い立ったので実装。

ついでに素のjavascriptのみで実装し...

CSS in ERB in JS という実証実験

SN

5/18 20:09



はじめに

この内容は meguro.css#1 での発表を元に内容を整理したものです。

リポジトリ: euxn23/css-in-erb-in-js-poc

スライド: slideshare


動機


大規模な CSS つらい


BEM/SMACCS/OOCSS は命名規則...

BackstopJSを使って、CSSをテストをする

SN

5/18 19:08



こういうときに便利


軽微だけれども影響範囲が広い修正の確認(コンポーネントレベルの修正がどこまで影響するか…というような)
リファクタリングを実施した場合に、修正前後で表示に差異がないかの確認
既...

こんな使い方が!? 意外と知らないCSS Flexboxの応用

SN

5/18 05:57

今や横並びの標準といえばFlexboxという時代ですが、そんなFlexboxでも意外と知られてないであろう使い方をご紹介します。

記述量を減らしたり、動的なサイトで重宝したり、リキッドレイアウトにも対応できち...

本当に使えるnth-childまとめ

SN

5/18 02:50



はじめに

数学に弱いコーダーはnが入って来ると計算がわからなくなります。

だったら最初から覚えずによく使うものはメモするといいです。

特にX〜Yまで、という指定はよく使うと思います。

なるべく指...

[CSS] absolute で 親要素(parent)との相対距離で位置を調整したい時に見るべきところ

SN

5/18 00:40

absolute を使って ページからの絶対距離ではなく、親要素との相対距離で位置を調整したいときがあります。

absolute 以外の position を使っても相対位置の距離で調整できるんですが、 absolute 以外では、 移...

コンポーネント時代に適した独自CSS設計を考えた[構想編]

SN

5/17 19:50

CSSの設計で色々と悩んだ末に

既存の設計ではしっくりこなかったので、独自の設計を考えてみました。

独自設計は、Base, Layouts, Objects, Modifiers というレイヤーに分けて、BLOMと名付けました。

BLOM...

印刷時にbackground-colorが反映されないときの対処法

SN

5/17 19:20



今回のテーマ

ページを印刷する際に背景色が反映されないことがありました。

印刷の際にページと同一の色を付与したいにも関わらず反映されないという事態、、

しかし、これはCSSで解決できるようです。

以...

CSSで-webkit-line-clampがきかなくて困った

SN

5/17 14:07

「css 複数行 3点リーダー」とかでググると下記のようなやり方がガンガン出てくるし、実際それで問題なく3点リーダーが表示される。

div {
display: -webkit-box;
-webkit-box-orient: vertical;
-...

JavaScriptを利用してCSSを切り替える

SN

5/17 11:45



最初に

IE11においてウェブサイトのレイアウトが崩れたため、その対策を考える必要があった。

レイアウト崩れの対策として、以下の3点があることを知った。

- メディアクエリを利用し、CSSの設定を行...

マグロを光でつつむCSSとJS

SN

5/17 00:59

あまり需要はないかもしれませんが、マグロを明るくする際の参考にしていただけたら幸いです。


CSS

ちょっとした見た目の変化を加えたいときに便利なfilterというプロパティがあります。グレースケールやぼか...

コーディングガイドライン草案

SN

5/16 17:28



HTML


拡張子は「.html」
文字コードはUTF-8(BOM無し)
改行コードはLF
インデントはタブスペース(半角4文字分)が好ましい。が、開発環境次第(Codekitだと半角スペース2つになってしまう)。
ファイル名は...

【IE10対応】input[type="file"]を.val('')で上書きできない→changeイベント発火しない。

SN

5/15 15:38

前回に引き続き、IE10対応のメモです。

input[type="file"]にファイルをアップロードした後、モダンブラウザ?だと$(this).val('')などでvalueを初期化できるのですが、IE10はそうはいきませんでした。

<inp...

円グラフをjQueryでフェードさせながら表示

SN

5/15 14:42

円グラフをjQueryで順番にフェードさせる簡単な方法です。

「jQueryに詳しくないけど動きをつけたい」という方はぜひ参考にしてください。

デモ

https://aruto-room.github.io/demo/graph.html

コード
...

PR:bitflyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で