ラップトップでブログを執筆している画像

エンジニアはみんなブログを運営すべきだと思います【趣味と実益と勉強の一石三鳥になる】

こんにちは、渋木です。

週も半ばの踏ん張りどころ、週末の夜更かしと趣味に没頭できる時間を楽しみに過ごすしかない、といった心地の私です。みなさんはいかがお過ごしでしょうか。

さて、今日はタイトルの通り、エンジニア(特にフロントエンドエンジニア)なら誰でもブログを運営すべき!というお話をしたいと思います。

なぜ急にそんな話になったかと言いますと、私自身の実感によるところが大きいです。ブログを運営していると、それだけでHTMLやCSSといったマークアップ言語の勉強になるのです。

先日投稿したばかりの、textareaにはvalue属性なんてものはありません【HTML】【備忘録】という記事を例に挙げます。

この記事では、inputとtextareaの違いについて説明する場面で、フォーマット(整形)済みテキストを表示できる「<pre></pre>」を使って、ソースを表示していました。

ちなみに<pre></pre>をWordPressのエディター上で使用する場合、「整形済み」「ソースコード」といったショートハンドボタンが用意されているので便利です(下部画像参照)。
それぞれ自動で付与されるclassが異なるので、多少見た目が変わってきますが、HTML的にはどちらを使っても<pre></pre>の間にテキストが収まることになります。

整形済みボタンの画像
ソースコードボタンの画像

その部分、PCサイズの画面幅ではなんの問題もなかったんですが、スマホで確認してみると・・・・

スマホ画面でpre要素から文字がはみ出している画像

なにこれ!!!??めっちゃはみ出てる!!!!??

更新したのが夜中だったので昨日はそのまま放置して寝てました←

それで今日改めて原因を探っていたんですけど、いろいろ調べてみた結果分かったこと、「<pre></pre>はデフォルトだと中身のテキストが折り返しされず突き抜けてしまう」んだそうです!

は~~~なんたる落とし穴。

まあでもキチンと右端でテキストを折り返しできるようなcssメソッドが用意されています。それが「white-space」です。

pre要素に対してwhite-space: pre-wrapを割り当ててあげればOKです。めちゃくちゃ簡単な話ですね。

pre{
  white-space: pre-wrap;
}

※ちなみに、WordPressで追加CSSをあてる際はいくつか注意点があります。游ゴシックが読みにくい?font-familyで解決!【Webフォント】という記事内で説明してますので、お時間ある方は読んでみてください。

さて、CSSを割り当ててみると・・・。

pre要素で文字がきちんと折り返されている画像

うん、すっかり綺麗になりましたね!これで横スクロールというおぞましいもとい、邪魔なもとい、不要なものを排除することが出来ますね!

ここまで話してきましたが、冒頭の本題に戻りましょう。

いかがですか?pre要素って、普段エンジニアとして仕事してる中で、そうそう使う頻度は高くないんですが、だからこそ勉強する機会がない限りずっと知らないままになる事物が意外とあったりします。

でもブログを運営していると、読者の方々に見やすく分かりやすい記事を書くために、否が応にも自分でいろいろと調べたり勉強したりしなくてはいけなくなるのです。

エンジニアのスキルアップは日々の勉強の小さな積み重ねの結果

これに尽きます。

ただし、毎日毎日勉強だけを目的に勉強していても消耗していくだけです。だったら趣味と実益を兼ねたブログを運営し、その副産物として同時に自らの勉強をも”賄っていく”ことが賢い選択だと、私は思います。

以上をまとめますと、

  • ブログ運営はHTMLやCSSの勉強につながる
  • ブログで趣味と実益と勉強の一石二鳥ならぬ一石三鳥になる

こんな感じです。ここまで読んでくださって、ありがとうございました!