Topic

CSS

A collection of 8 issues

CSS カスタムプロパティ(変数)

CSS 知識更新! 参考: MDN - CSS カスタムプロパティ (変数) の使用 謎のスタイル定義を発見 ある日、いつものようにスタイルをデバッグしていたときのこと。 適用スタイルの下の方に、見慣れない書き方の項目があるのに気づきました。 --blue ってなに? そんなスタイルあったっけ? CSS カスタムプロパティ (変数)とは これは、 CSSカスタムプロパティ または CSSカスタム変数 といって、CSS 内で変数として記述する書き方だそうです。 CSS で変数の使い回しが出来ないと思いこんでいたので衝撃。 今まで sassやらlessやらじゃないと出来ないと思っていた CSS 内で使える変数が、実はブラウザでサポートされていたとは。 例によってInternet Explorerでは使えません。 ちょっと前のプロジェクトは IE 対応必須だったので、「CSS では変数が使えないので sass 使います」って言ったのは間違いではなかった。 使い方 とっても簡単。 どっかで定義して、どっかで使うだけ。 変数として宣言するとき
2 min read

Markdownで改ページのコントロールがしたい!

Markdown を PDF 化して納品しようとしたら改ページがぐっちゃぐちゃなので怒られた話。 あるあ・・・すみませんでした。 Markdown でPDFの改ページ制御なんてできるの? きっとできるさ。 変換は VSCode のプラグインである Markdown All in One というものを使っています。 このツールはMarkdown → HTML → PDF の順に変換します。 HTML の印刷スタイル設定が PDF に効くので、CSSでスタイルを設定すればいいと思われます。 改ページ用の CSS 属性 改ページには page-break-after という属性があって、これを使います。 MDN: page-break-after おや? MDN をよく見ると、この属性は break-after に置き換えられたとのことです。 MDN: break-after Markdown のどの要素に使う? 本来この属性はdivやsectionなどのブロックに対して使うのですが、Markdownで書いているとブロックを意識することがあり
1 min read

CSS で、はみ出したテキストを省略する

「ブロック内の文章を、3 行以上は表示させないようにして!」 「切れたところには ... 入れといて!」 あるある。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
2 min read

JavaScriptを使わずにCSSでツールチップ

ツールチップを表示させるのに、jQueryやBootstrapなどのライブラリを使うまでもないなーってとき、CSS だけで記述する方法があります。 まずはサンプルをご覧ください。 マウスホバーでツールチップを表示 ここにマウスを載せる ↑ の要素にマウスを載せるとツールチップが表示されます。 このサンプルでは JavaScript は使わず、CSS のみで対応しています。 ソースコード解説 HTML HTMLにはdata-tooltipというカスタム属性を設定します。カスタム属性は、data-プレフィックスで始まっていれば自由に設定して良いというHTML5の仕様です。 CSS CSSはちょっと複雑です。 下記はボタンの見た目を定義しています。 button { position: relative; padding: 7px; border-radius: 5px; } ここか
1 min read

ブログでフロントエンドコードを実行したい!

Hexoで文章を書くのは良いのだけれど Hexoでブログを書くのはとても快適です。 コードを載せるのも快適です。 ただ、HTMLとJavaScriptとCSSを組み合わせて、実際に動くページを作ろうとするとちょっと煩雑。。。 babelとかautoprefixorとか用意するの面倒だし。 解決! 別サイトを立ち上げた コード見るより、動きを見たほうが良いことってありますよね。 同じくコード見せるより動きを見てほしいこともあるんです。 ってなわけでnuxt.jsをベースに、別サイトを立ち上げました。 猫好きが猫以外のことも書く[技術検証ラボ] ページヘッダのネコが、時々なにかをつぶやきます。 2019/11/12 追記 このサイト自体をNuxt.js化したのでもう別サイトは必要なくなりました。。。
1 min read

CSS filterで複数の効果

filter は多重がけできない? 例えば下記のような CSS でblurとdrop-shadowを2つ適用しようとしてもうまくいきません。 /* ぼかしと影を同時適用できず、最後のフィルタが有効となる */ .dbl-filter { filter: blur(3px); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6)); } 最後に定義したフィルタが適用されます。 これはfilterという属性を 2 回定義したことと同じなので、CSS のルールに従って最後に定義されたものが有効になります。 1 つの filter 属性に複数の関数を渡す 上記の例は「複数の filter は定義できない」ということではなく、単に指定の仕方が悪いだけです。 1つのfilterに複数の関数を渡すことで問題なく多重が
2 min read

CSS filter - 画像をぼかす

filter: blur で画像をぼかす 画像をぼかしてみます。 blur 関数 ねこ画像にblur関数でぼかしをかけてみます。 関数への引数はぼかしの半径です。10px でもかなりボケますね。emや%などの相対指定も可能です。 /* filterでぼかし */ .filter-blur { filter: blur(10px); } .filter-blur:hover { filter: blur(0px); } filter:blur リファレンス MDN のサイトが参考になります。 blur() ねこ画像 by 素材 Library.com, Thanks!!
1 min read

CSS filter - 画像に沿って影をつける

CSS だけで、画像に沿って影をつけたい! box-shadow しか知らないあなたへ つい最近まで私もそうでしたが、img タグの画像に影を付けるときはbox-shadowを使っていました。 皆さんご存知の通り、box-shadowでは画像の内容がどうであれ、画像の外枠にしか影が付きません。 しかし最近、いろいろ SVG や透過 PNG 画像を扱うようなり、画像の形を活かして影をつけたい要望も増えてきました。 そこで今回は画像の形で影を落とす、CSS のfilter: drop-shadow関数を使ってみます。 まずは box-shadow のおさらい まずは通常のbox-shadowです。 /* box-shadow */ .box-shadow { box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
2 min read

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe