スポンサーリンク

「Brackets」で書いたCSSファイルを印刷して確認してみました。

「サクラエディタ」で印刷した「style.txt」の画像 ブログ

こんにちは。

しばらくの間、WordPressテーマ「Cocoon」のCSSをいじっていました。
だいぶイメージと近づけることはできましたが、とにかく疲れた!!\(^o^)/
コーディングに向いていない人間にタグを書かせるものではありません。
(CSSを考えすぎて、コーディングが夢にまで出てきた)

カスタマイズにはまりすぎてブログ記事を書けないのは本末転倒である」という初心に返り、今回は記事を書きます。

スポンサーリンク

「Brackets」でコーディング。

今回、「Brackets」というエディターを使ってCSSを書いていきました。

「Brackets」は以下の公式サイトからダウンロードできます。

A modern, open source code editor that understands web design
Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With ne...

「Brackets」を知ったのはきたみりゅうじさんのブログから。

Webサイトの構築・カスタマイズにはBracketsが最高すぎる
 当初はDreamweaverで快適なサイト管理・カスタマイズ環境を作るつもりでしたが、やっぱりどうもアプリケーションの作りと自分のやりたいことがマッチしなくて諦めました。今のDreamweaverって、WordPressで作る個人ブログみ

この記事を読んで、試しに使ってみたところ、確かに使いやすい。
何より、コーディング初心者にも分かりやすく、直感的に操作できるところがうれしいです。
そして動作も軽い。

コーディングは目が痛む。

ところが。
コーディングを長時間続けていると、目が痛むのです。
そして睡眠も浅くなり、常にコーディングのことを頭の隅で考えるはめになり、なぜかイライラまで発生。

まったくもってメンタルヘルスによろしくない!\(^o^)/

しかしCSSは書きっぱなしというわけにはいきません。
ある程度CSSを書いた後、重複している箇所や必要ない文言を削る整形作業が必要になってきます。

これがまた、目にきついんじゃよ……!(◎ω◎)

ということで、書いたCSSを印刷して、それをボールペンで訂正することにしました。

スポンサーリンク

「Brackets」から印刷はできない?

「Brackets」では、「プラグイン」という補完機能をインストールして機能を追加することができます。

印刷機能を追加するプラグインがないものかと探してみたのですが、どうやらないらしい……?

そこで、

  1. 編集した「style.css」を複製
  2. 複製した「style.css」の拡張子を「.txt」に変更(テキストファイルに変換)
  3. 「style.txt」を「サクラエディタ」で開いて印刷

という手順で印刷しました。

なぜわざわざ「style.css」を複製してテキストファイルに変換しているかというと、

  • 「style.css」に万が一のことがないように複製した
  • 装飾のない状態で印刷してみたかった

という二つの理由があります。

「サクラエディタ」とは?

「サクラエディタ」は、個人的に使いやすいと感じて愛用している日本語テキストエディタです。
公式サイトはこちら↓。

Sakura Editor
Japanese text editor for MS Windows

他にもいろいろなテキストエディタがあるので、興味のある方は「テキストエディタ」で検索してみてください(・∀・)

実際に印刷してみた。

「サクラエディタ」には印刷機能があるので、「style.txt」を開いて印刷。

見づらいですが(すみません)、こんな感じ↓になりました。

「サクラエディタ」で印刷した「style.txt」

テキストファイルのモノクロ印刷なので、装飾はありません。

印刷した後、赤いボールペンで訂正を加えています。
字は細かいですが、ディスプレイを見続けるより目に優しいです(´ω`*)

「Brackets」からの印刷方法について書かれたサイトを発見。

こんなサイト↓も発見しました。

Bracketsでhtml・css・JavaScriptのソースコードを印刷する方法
今日は、Bracketsでhtml・css・JavaScriptのソースコードファイルを印刷する方法を……実は(管理人が調査した範囲では、)Bracketsから直接印刷することはできません。なので管理人がやっている代わりの方法をお伝えします。

おお、とてもスマートな印刷方法……!
「Brackets」の新たな便利さを教えていただきました(・∀・)
(右クリックが使えるという発想がなかった)

コーディング結果を印刷して確認すると疲れにくい。

個人的に、パソコンやスマホの画面を見すぎると、目や頭が痛くなりやすいタイプです。
普段からこんな目薬↓をさしたり、

created by Rinker
ロート目薬
¥645(2019/08/26 18:20:44時点 Amazon調べ-詳細)

JINSでPC眼鏡を作ってもらったりと工夫していますが、なんと言っても画面を見ないに越したことはない

ですので今回、「Brackets」で編集したCSSファイルを印刷してみました。
目に優しいだけでなく、CSSを俯瞰的に見られるため一覧性に優れています。

今後もコーディング結果は印刷しようかな(^^;)

今のところ、テキストエディタを経由する必要はありますが、印刷→確認という流れもなかなかおすすめです(^^)/

0

コメント

タイトルとURLをコピーしました