Brackets を使ってみた

コロナ自粛の最中に作り始めて、夏から秋にかけて別の仕事で中断していたWordPressの講座作りを再開しました。
中断していた理由は内容がHTMLとCSSで、どうにもややこしいからで💦

でも作るからには正しい内容でないといけないので、大昔に仕入れた知識をオーバーホールしようと思って、この本を買ってみました。

思えば私がちゃんとHTMLとCSSを勉強したのは、自分がとある専門学校でWEB制作の授業を1コマ×2学年受け持っていた2年間のことで、当時はHTML4とCSS3、という本を使っていたように思います。

あれから10年以上たつけど、HTML4が5になったというより、CSS3がめっちゃ進化したような気がするなーと思いつつ、とりあえず本だけ買ってみました。

表紙がかわいい。そういうの大事ですね、モチベーション上がるので😀

現時点では前半しか読んでないというか、講座を作るのに必要そうなとこだけチラ見してるんだけど、全体に、進化したCSSの全部をカバーしてるわけじゃないっぽいので、CSSをがっつり知りたい人はCSSだけの本を買った方が良いかもという印象。

私自身、なんでもWordPressで既存のテーマを使って作っちゃうので、そこまでがっつりCSSを学ぶ必要がない(テーマ作者さんが対応してくれてると信じてるので)この本でじゅうぶんかな。

ところで今日のトピックはCSSじゃなくて、Bracketsというソフトが使いやすいというお話でした。

Bracketsというのは、HTMLとCSSとjsの開発に使えるエディタで、下の図は撮影用にかなり文字サイズを大きくして表示したところです。

こんな感じでHTMLとCSSファイルを並べてだだっと書いて、右上のプレビューボタンを押してブラウザで確認することができます。いちいち保存しなくてもプレビューできるのがいいですね。

個人的にはWEBサービスのliveweave もいいかなーと思ったんですが…

このサイトはほんとにリアルタイムプレビューなので、htmlやcssを書くたびに右したのプレビューが変化して、ちょっとめまぐるしすぎるかなと思ったので、Bracketsを使ってHTMLとCSSの解説をおこないました。

今回の講座では、ほんとに基本的なHTMLとCSSだけを紹介したんですが、実際、WordPressをデザイン的にカスタマイズするとなると、それだけでできるのかどうか、なお検証が必要かな、というところです。

教材は準備編・本編が完成して、あと付録編が制作中。
ですが、プロトタイプとして限定リリースしてるので、興味ある方はお問合せくださいね。

※ひさしぶりにWordPressで記事書いたら、ブロックがめっちゃ使いやすくなってて感激です!もうクラシックエディタには戻れませんね😀

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