自動化厨のプログラミングメモブログ│CODE-LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

はてなブログで書いたコードブロックに行番号を表示する方法(CSS+JavaScript)

この記事でできるようになること

  1. はてなブログのコードブロックに行番号を表示
  2. はてなブログのコードブロックの偶数行のみ背景色をつける
  3. [おまけ]はてなブログのコードブロックの左上に言語名を表示する

最初は行番号のみで考えていましたがついでに縞々もやってみました。

完成イメージは以下の状態

f:id:maru0014:20180522222246p:plain

要件

  • JavaScriptで追加する方法もあるみたいだけどCSSでやりたい
  • シンタックスハイライトははてな標準で十分
  • highlight.jsなどのライブラリは使いたくない
続きを読む

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

プログラミングの学習においてProgate(プロゲート)を使っています。

HTMLやCSSの学習は有料部分含め全て終えたわけですが、最後に残っていたのがSass。

なんとなくのイメージはCSSの上位版というか効率的にCSSを書けるもの。具体的にどんな事ができるかはぼんやりしていたので何が出来て何が良いのかをまとめてみます。

SassにはSASS記法とSCSS記法の2種類の書き方がある

プロゲートではSCSS記法で学習するみたいですがググって見たところそれぞれの特徴はこう。

①SASS記法

{}などの括弧を使わずインデントのみで階層構造を書く記法。 セミコロンも無しなんて凄くスピーディーに書けそうですね!

div
    margin: 0 auto
    a
        color: red

②SCSS記法

こっちはCSSと同じっぽい?と思いきやdivの中にaがある! 階層構造になっているわけですね。

どちらかというとこっちのSCSSが主流らしいです。

div {
    margin: 0 auto;
    a {
        color: red;
    }
}

参考: SassとSASSとSCSSの違いについて | UX MILK

ふと気づいたけどはてなブログのシンタックスハイライトには「sass」はあるけど「scss」は無いんですねぇ。

Sassで書くメリット

前述部分でもう分かってしまいましたね。いちばん大事な部分。「入れ子構造で短く書ける」というところ。

そしてもう一つに「変数が使える」こと。要は一度書いたスタイルを名前で呼び出して再利用できるということですね。

書いた後の修正が楽

.header {
  width: 100%;
}
.header ui {
  padding: 10px;
}
.header ui li {
  font-size: 15px;
}

などと書いたあとに.headerのセレクタ名を変更したいという場合にCSSの場合は3箇所を編集する必要がある。

でもSCSSの書き方なら1箇所だけを編集すればOK。

.header {
  width: 100%;
  ui {
    padding: 10px;
    li {
      font-size: 15px;
    }
  }
}

変数を使ってスタイルを使い回す

普通のCSSで文字の色を指定する場合

h1 {
  color: red;
}
p{
  color: red;
}
a{
  color: red;
}

SCSSで変数を使って書く場合

$main-color: red;
h1 {
  color: $main-color;
}
p{
  color: $main-color;
}
a{
  color: $main-color;
}

こうすることによってクラス名の修正の時同様に変数$main-colorの値を変えるだけで一挙に各要素の文字色を変更可能です。

ここまででも十分便利っぽいですが他にもいろいろあるみたい。

SCSSで出来ること

mixinでコードを一括で読み込む

$main-colorの時の例ではプロパティの値のみを変数として格納して利用していましたが、mixinではプロパティをまるごと変数にできるイメージ。

@mixin 変数名 {
  ここにCSS
}

のようなかんじです。

読み込みは@include 変数名;でOK。 以下の例ではカードっぽいデザインをmixin化して使いまわしています。

@mixin card {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px #ccc;
}

.main-card {
  @include card;
  width: 50%;
}
.sub-card {
  @include card;
  width: 25%;
}

mixinに引数を渡して値を代入する

前述のカードスタイルの例ではwidthをメインとサブで分けて記述していますが、このwidthの値を引数として渡すよう書き換えるとさらに短く簡潔に書くことができます。

@mixin card($wsize) {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px #ccc;
  width: $wsize;
}

.main-card {
  @include card(50%);
}
.sub-card {
  @include card(25%);
}

@mixin card($wsize)とすることで引数として受け取った値を自動的に$wsizeという変数に格納します。

  1. .main-cardでは50%が引数として渡される
  2. $wsize50%が代入される
  3. width: $wsize;width: 50%;となる

のような流れでCSSが読み込まれます。 ここまでくるとかなりプログラミングって感じがしてきますね。

関数を使って動的に色を生成する

Sassには関数がある。引数を渡すと計算後の値が返ってくるというあれができる。

例として出てきたのは色の生成。色を暗くする関数darken、色を明るくするlighten、透明度を指定する関数rgbaの3つがでてきました。

//redを10%暗く
.dark-red {
  color: darken(red, 10%)    
}
//redを10%明るく
.light-red {
  color: lighten(red, 10%)    
}
//redを50%透明に
.skeleton-red {
  color: rgba(red, 0.5)    
}

これを使えば基準の色を元にhover色やactive色を生成できるのでメインカラーだけ指定すればそれらしいカラーセットが作れそうですね。

importで外部ファイルを読み込む

CSSでもimportはありますが、SCSSでは読み込まれる側のファイル名の先頭に「_」(アンダーバー)を付ける必要があるようです。

そして読み込む時は「」と「.scss」を省略してOKらしい。 「variables.scss」というファイルを作って読み込むとすると

@import "variables";

で読み込むことができる。 で、これができると何が良いのかというと読み込み元の変数をそのまま使えるようになること。 そして、_variables.scssファイルに変数を全てまとめて記述しておくと設定ファイルのような使い方ができる。

$main-color: #d00;
$sub-color: lighten($main-color, 20%);
$font-color: white;
@import "variables";
h1 {
  background-color: $main-color;
  .tag {
    background-color: $sub-color;
    color: $font-color;
  }
}

このようにstyle.scssはテンプレートとして触らないようにして、_variables.scssさえ変更すればデザインが変わるようなことができます。

プロゲートでのお勉強部分はここらへんまででした。 その先は実践的な内容で目標物があって、それと同じにするにはどう書くでしょう的な問題。

最近は仕事でもマテリアライズフレームワークを使っているため、CSSをガシガシ書く時間が減っていたのですがSCSSで書きたくなってきました。

次にページ製作をやるときもしくはリファクタリングするときには使ってみようと思います。

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

この記事でできるようになること

  • divやliの表示をキレイに簡単に横並びにできる

去年(2016年)くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout(フレキシブルボックスレイアウト)。通称flexbox。 そろそろ使っても良いんじゃないでしょうか。

Flexboxのブラウザ対応状況

f:id:maru0014:20171119175621p:plain

参考: Can I use... Support tables for HTML5, CSS3, etc

 

(例)Flexboxで要素を横並びに

See the Pen flexbox by maru (@maru0014) on CodePen.

キレイにdiv要素が横並びになってますね。6つの子要素が横並びになっていますが、width(幅)指定は100%です。 width:calc(100%/6);でもなく、width:16.666667%;でもありません。これもFlexboxのすごいところ。 display:flex;が指定された親要素を持つ子要素は6等分のサイズを指定しなくてもいいかんじに等分してくれます。

7つ目の子要素を足そうが、8つ目を足そうが、改行されることなく横並びに。 そしてfloat:left;と違ってclearfix不要です。素晴らしい。

 

使い方は親要素に一行追記するだけ

.row {
  display: flex;/*これを入れるだけで横並び*/
  background: #ccc;
}

前述した実装例でもdisplay: flex;CSSに追記してあります。 超絶楽です。

 

3つごとに改行(3等分)にしたい場合はflex-wrap:wrap;を追記

flexbox化した親要素の属性にflex-wrap:wrap;を追記すると回り込み(改行)が有効化されます。

.row {
  display: flex;
  flex-wrap:wrap;/*回り込み有効化*/
  background: #ccc;
}

そしてfloat:left;の時のように子要素のサイズを指定

.col {
  width: calc(100% / 3);/*3等分*/
}

(例)子要素をキレイに3列で表示

See the Pen flexbox-wrap by maru (@maru0014) on CodePen.

いかがでしょうか。 今までfloat:left;で横並びにして、サイズ指定して、clearfixして、という作り方だったものが3つのプロパティだけで実装できてしまいました。

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

clearfixが適用されていない状態

See the Pen flow-root by maru (@maru0014) on CodePen.

float:left;でdiv要素を横並びにしましたが、clearfixを行っていないため外枠の.rowが上の方でちっちゃくなってしまいました。 現状で最もスマートな、短いclearfixとしては以下のような書き方でしょうか。

.row:after {
    content: "";
    display: table;
    clear: both;
}

Googleが作り上げたフレームワーク「マテリアライズDocumentation - Materialize)」においても上記のような記述となっていたため、これが現時点での最も正解に近い書き方なのかもしれません。 しかし、今後は新しい属性値flow-rootによって更に簡単に実装できそうです。

参考: CSS Display Module Level 3

display:flow-root;を書き加えた

See the Pen flow-root-on by maru (@maru0014) on CodePen.

変更点は一行のみ親要素div.rowdisplay:flow-root;を追記しただけです。 これは超簡単!

ただし、Safari未対応

f:id:maru0014:20171119160554p:plain 参考: Can I use... Support tables for HTML5, CSS3, etc

ChromeFirefoxoperaは対応しているようですが、Edgeやsafariは未対応。 AndroidはOK、iPhoneは✕という状況です。(IEは知らん)

結局まだclearfixは必要かな

ゆくゆくはsafariも対応するでしょうが、それまでは前述したafter要素によるclearfixが最適かと思います。 対応するまではこれを使いましょう。

.row:after {
    content: "";
    display: table;
    clear: both;
}

他の手段としてはflexboxを使うという方法もありますね。

code-life.hatenablog.com

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

.hogehoge { pointer-events: none; }

例えば商品ページの商品画像にリンクが貼ってある状態で、 その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を

.soldout {
  position: relative;
}
.soldout:after {
  content: ""
  display: block;
  background: (soldout.png) no-repeat;
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
}

とかで表示した場合。 商品画像リンクの上に画像があるためリンクをクリックできませんよね。

こんなときに売り切れ画像をすり抜けてリンクをクリックできるようにするのが pointer-events: none; です。

このスタイルを指定すると目には見えているけどマウスのカーソルは透過するようになります。

※ブラウザの対応状況に注意

スマートフォン向けならば問題ないですが、IE10以下未対応のプロパティです。 まだまだIE10以下を使っている人は多いので、PC向けのページでの利用はオススメできません。


jQueryならIE10以下も対応

CSSのpointer-events: none;はIE10以下は機能しない。 ならばjQueryで実装する手もあります。

.soldout:afterの部分に透過させたい要素のクラス名を記述

<!--jQuery読込-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
<!--クリック無効化-->
<script>
$(function(){
    $('.soldout:after').click(function(){
       return false;
    })
});
</script>

上記のタグを<head>内に記述すればOKです。

IE11~Edgeが主流になるまではjQueryでの実装がベストかと思います。