chromebookだけでブログのHTML、CSS、JavaScriptの編集ができる!

Chromebook

コーディングと一言で言っても、様々な言語がありますが、ブログ運営に使う基本的な言語といえばHTML、CSS、JavaScriptの3種類です。
この3種類が編集できればほとんど自分の思うようにサイトデザインを変えることができます

実は、HTML、CSS、JavaScriptのどれもがブラウザ上で動きを確認できるのですが、メモ帳のような簡易なテキストエディタだけでコーディングをしていると出来上がりがわかりにくかったり、書き間違いが多発したりと、なかなか思うように進みません。

通常、パソコンを使用してコーディングをするときは、高機能なテキストエディタをインストールして環境を整えます。
では、今回はchromebookではどのように「コーディングしやすい環境を整えるのか」について、ご紹介します

ちなみに、私の使っているChromebookはこちら。

Chromebook Flip C101PAのレビューを2年間使っている私が本音で書いてみる
ASUSのChromebook C101PAを2年間使用している私が本音でレビューします!!軽量のChromebookが少ない今、有力な候補として上がる機種。特に初めてChromebookを購入しようと思っている方に見てほしいです。
スポンサーリンク

そもそもHTML、CSS、Javascriptって何?

「ブログ運営に使う基本的な言語といえばHTML、CSS、JavaScriptの3種類である」と言いましたが、それぞれどのような役割をする言語かご存知ですか?
簡単にご紹介しますので、自分がやりたいことを実現するにはどの言語を使えばいいか、想像してみてください。

HTMLの役割

HTMLはサイトの骨組みをつくります。
表示したい要素や構造を指定します。

ここの文字を変えたい!とか、ここに図を追加したい!といった時はHTMLを編集すれば、変更することができます。

CSSの役割

CSSは飾り付けの役割をします。
HTMLで配置した要素のデザインを変えることができます。

文字の色や大きさを変えたい!など、装飾をするときにはCSSを編集すれば、変更することができます。

JavaScriptの役割

JavaScriptは動きをつける役割をします。

例えば、よく見る「スライドショー」や「スムーススクロール」など特殊なことをしたいときはJavaScriptを使うと実現できます。

ChromebookでHTML、CSS、JavaScriptをコーディングするには?

ChromebookでHTML、CSS、JavaScriptをコーディングする方法はいくつかありますが、今回は私が実際に行っている方法をいくつかご紹介します。

Chromebookにおける簡単なコーディングはメモ帳アプリ「Text」

ある程度簡易な内容で、出来上がりをリアルタイムで確認する必要のない場合、使うのは「Text」というアプリケーションです。

Text
A text editor for Chrome OS and Chrome.

かなりシンプルで、動作が軽いのが特徴です。オフラインでも使用できます。
行番号の表示や、コードの色付けもされるので、コーディングに必要な最低限の機能が備わっています。
もちろん、コーディング以外の通常のテキストエディタとしてもおすすめです。

日本語に対応しているので、直感的に操作でき、設定も簡単なので、お使いのChromebookにいれておいて間違いはないでしょう。

Chromebookにおける複雑なコーディングは「WebMaker」

実際に出来上がりのデザインを確認しながらコーディングしたいとか、HTMLもCSSもJavaScriptも全部一気にコーディングしたいというときにおすすめなのがWebMakerです。

Web Maker
A blazing fast & offline web playground

WebMakerは「Chrome拡張機能」「ブラウザ上」「オフライン」のどれでも使用できます。

画面イメージはこんな感じ。

コードを記入していくと、プレビューがリアルタイムで更新されます。 いちいちファイルをブラウザで開いて、更新して、また別のファイルを開いて・・・という煩わしい作業が必要ありません。

HTMLはbodyタグの中身から始めるので、いちいちDOCTYPEなどの面倒な記述をしなくても済みます。CSS、JavaScriptも同様、中身から書き始めます。
WordPressで記事のパーツ等を作るときには同じようにbodyの中身のみを書くので、WebMakerでコーディングするのにぴったりです。

Chromebookだけでブログのコーディングは十分可能!

私は、このOMULIFEのデザインを作るのに、すべてChromebookでコーディングを行いました。HTML、CSS、JavaScript、それぞれ特徴がありますが、上記のサービスを使えばChromebookでも簡単に書くことができます。

デザインを考えるときって、じっと頭を抱えていても行き詰ってしまうことが多いんですよね・・・。そんなとき、私はChromebookを小脇に抱えてちょっと外に出てみます。
近くのカフェやコアワーキングスペースで、おいしいコーヒーを飲みながらリフレッシュするとぐっとアイディアがわいてきて、そのままChromebookで一気に書いてしまいます。

家にパソコンがあるという人でも、これからHTMLやCSS、Javascriptの勉強を始めたいけどパソコンを買うのはちょっと高いなと思っている人でも、ぜひChromebookでコーディングすることを検討してみてください!おすすめします!

chromebookならペンタブなしでイラストが描けるって知ってた?
chromebookで使えるのはインターネットブラウザだけだと思っていませんか?実は、chromebookで出来ること...
ChromeBookをブログ運営初心者におすすめする理由
皆さんはどんなデバイスを使っていますか?ノートパソコン?デスクトップパソコン?OSはMacですか?それ...
Chromebookでも動画編集ができる!対応アプリやサービスは?
私は、ブログ運営の全てをChromebookで行っています。Chromebookはインターネット、記事作成、画...
この記事を書いた人
きぬたなお

在宅勤務を夢見るフツーの会社員。ブラックすぎる企業から転職して天国のような職場で働いています。多趣味すぎてあっちこっち手を出すものの、たいてい三日坊主。あと美味しいものに目がない。

きぬたなおをフォローする
Chromebook ガジェット ブログ運営
スポンサーリンク
omulife