こんにちは。イッチです。
これからWEBデザインをしていくうえで、必要な事を教えます!
今回はブラウザと「Brackets」のプラグインについてです。
ブラウザ
ブラウザはwindows10においては、Internet ExplorerやFirefox、Google Chromeなどがありますが、WEBデザインにおいて一番相性がいいのが、Google Chromeです。
なぜなら、今、日本で一番検索ユーザー数が多いのがGoogle Chromeであり、ホームページを作って検索してもらう際に、Googleが一番使われるからです。
ちなみに、日本のWebブラウザシェアランキングは、2018年11月現在で、第1位のGoogle Chromeが36.37%、第2位のInternet Explorerが16.19%、それ以下が7%以下という状況です。
あとは、普段はあまり知られていないことなのですが、全世界のホームページのプログラム(コード)は、ある方法によって見ることが可能です。
その方法は、見たいホームページの上で右クリックして、Chromeであれば「検証」をクリックするだけです。
この検証(デベロッパーツールといいます)を使えば、今のプログラミングがどのように反映されているかを見る事が出来たり、保存はできませんが、実際にコードや数値を書き換えてみて、どのように反映されるのかを確認する事ができます。
ちなみに、このデベロッパーツールは、方法は違いますが各ブラウザでも使えます。
しかし、一番最初はGoogle Chromeで慣れていたほうが効率が良いと思われます。
なぜなら、後程お伝えするSEO(Search Engine Optimization:検索エンジン最適化)に取り組む際に、Webブラウザシェアの大きいgoogle chromeでコードを作成するのが効率がいいという点を挙げられるからです。
次に、前回で紹介したエディター「Brackets」のプラグインについて紹介します。
「Brackets」のプラグイン
その、プラグインとは拡張機能のことです。
エディターを使ってコーディングする際に、さまざまなサポートをしてくれるソフトのようなものだと覚えておいてください。
ちなみに、全て無料です。
今回は、初心者でも有用なプラグインを2つ紹介します。
その導入方法を教えます。
まず、最初に上図のようにプラグインのアイコンをクリックしてください。
すると、上のような画面が出てきますので、入手可能タブをクリックして「Beautify」と打ち込みます。
ちなみに「Beautify」というプラグインは、ごちゃごちゃになったコードが美しく整う様になるプラグインです。
インデントなどをあらかじめ設定で決めておけば、自分好みに整えることが可能です。
Bracketsに慣れたら、自分で設定をいじってみてもいいかもしれません。
ここでは詳しくは述べませんが、「Brackets Beautify 設定変更」で検索すれば、方法がわかると思います。
個人的には、保存する度に自動で整うようになるのが便利です。
次に紹介するのが、「Highlight Multible Symbols」です。
これは、「全角空白スペース」と「半角空白スペース」とを区別できるように記号表示してくれるプラグインです。
ちなみに、画面ではこうなります。
というのも、HTML&CSSコードを打ち込んでいく際に、半角1文字分のずれやスペルミスがあるだけで、コーディングが反映されないという結果が起こります。
なので、常にコーディングの際には、文字やスペースの打ち間違えに細心の注意を払わなければなりません。
ですので、この「Highlight Multible Symbols」のプラグインは、初心者には優しいプラグインの一つであると思われます。
そしてもし、このプラグインの画面がわずらわしいなと感じたら、プラグインを無効にすれば、ハイライトは消えます。
これはどのプラグインにも言えることです。
そして、プラグインは自分の用途に合わせて、いくらでもカスタマイズ(入手)可能です。
いろいろ導入して、いろいろ試してみるのも一つの方法です!
ここまで読んでくださってありがとうございます。
イッチでした。(その3に続く)