【2020年更新】はてなブログで書いたコードブロックに行番号を表示する方法（CSS+JavaScript）

CSS JavaScript

この記事でできるようになること完成イメージは以下の状態 CSSのcontent: counterを使ってみる JavaScriptで行ごとにdivで囲む CSSで付け足したdivごとにカウントアップ [おまけ]コードブロック左上に言語名を表示するCSS この記事でできるようになること …

2018-05-14

Sassで何ができて何が良いのかProgateで勉強しながらまとめてみた

CSS Sass SCSS

プログラミングの学習においてProgate（プロゲート）を使っています。 HTMLやCSSの学習は有料部分含め全て終えたわけですが、最後に残っていたのがSass。なんとなくのイメージはCSSの上位版というか効率的にCSSを書けるもの。具体的にどんな事ができるかは…

2017-11-19

HTML要素を超簡単に横並びにできるCSSの書き方 Flexbox

CSS HTML

この記事でできるようになること divやliの表示をキレイに簡単に横並びにできる去年（2016年）くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout（フレキシブルボックスレイアウト）。通称flexbox。そろそろ使っても良いんじゃ…

2017-11-19

【2017年最新】clearfix一番短い書き方は親要素にdisplay:flow-root;を書き加えるだけ

CSS

clearfixが適用されていない状態 See the Pen flow-root by maru (@maru0014) on CodePen. float:left;でdiv要素を横並びにしましたが、clearfixを行っていないため外枠の.rowが上の方でちっちゃくなってしまいました。現状で最もスマートな、短いclearfix…

2016-02-09

マウスのクリックを透過・無効化させる2つの方法 CSSとjQuery

CSS jQuery

.hogehoge { pointer-events: none; } 例えば商品ページの商品画像にリンクが貼ってある状態で、その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を .soldout { position: relative; } .soldout:after { content: "" display…

2016-01-09

CSSで画像をぼかしてオンマウスした画像だけ鮮明に

CSS

See the Pen CSSで画像をぼかしてオンマウスした画像だけ鮮明に by maru (@maru0014) on CodePen. img { width:30%; -webkit-filter: blur(2px); filter: blur(2px); } filterプロパティはその名のとおり画像にフィルターをかけることができます。これを使…

2016-01-09