cssのカスタマイズなんてのはネットに繋がってるPCがあったら、ブラウザの開発環境であっという間にできるわけですよ。

しかしそれがネットに繋がってないPCなら…。

そうそれはマジで地獄です。htmlを見ながら構造をイメージしつつ、IDだのclassだのを探しながらcssを当てていくだけなのに、開発環境がないとマジでイライラします。

本来であれば実際に値を入れてみてどうなるかを確かめながら修正できるわけですが、スマホではそれができない。だからすべて紙の上で作業してるみたいなもんで、これでイケてるだろ？とアップロードしてみると直ってない、あ、これかと修正してみるも直ってない。

おかしい何故だ？とcssを見てたら、そんな所で手を入れてんじゃねえよって箇所でパラメーターをいじってあるわけです。

cssを書く際は、わかりやすい名前をつけて、機能やらをまとめて、更にはいわゆるヘルパーclassのようなものを利用してわかりやすく書くべきだなとつくづく思いました。

そんな折、htmlの構造を知る上で便利なブックマークレットがあったのでここに置いておきます。

Construct.css

javascript:(function(d){var%20f=Array.prototype.forEach;var%20linkTags=d.querySelectorAll('[rel=\'stylesheet\']');var%20styleTags=d.querySelectorAll('style');f.call(linkTags,function(x){x.rel=''});f.call(styleTags,function(x){x.innerHTML=''});var%20newLink=d.createElement('link');newLink.rel='stylesheet';newLink.href='https://t7.github.io/construct.css/css/bookmarklet.css';d.head.appendChild(newLink)})(document);

流れ的には、

  1. 上記コードをコピペ
  2. どこかのサイトをブックマークして、タイトルとアドレスを編集して任意のタイトル(できれば短め)とアドレス欄に上記を貼り付け
  3. htmlの構造を確かめたいサイトでアドレス欄に先程つけたブックマークのタイトルを入力して実行

こういう流れでhtmlの構造が見れます。

詳細は以外で。

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css