読者です 読者をやめる 読者になる 読者になる

ガレスタさんのDIY日記

電子回路、Web、組み込み、自作エフェクターを語るblog

僕なりのホームページ作成について(2)

ホームページ

前回までの話

前回はMakerにおいて情報発信がネック。

じゃあ僕なりに解説しよう→HelloWorld的な流れだったと思う。

実践してみる

そんなわけで今回はツールを使ってCSSを割り当てて見やすくする。ということをやってみる

そんなわけで今回使うツールAdobe社がフリーで公開しているWeb専用の開発環境であるBracketsを使ってみようと思う。
brackets.io

Bracketsって?

オープンソースで開発されているWebアプリ開発向けのコードエディター。別のファイルに記述されたCSS/JavaScriptをHTMLタグから呼び出し、その場でインライン編集できるようにする“クイック編集”や、「Google Chrome」をリモートデバッグモードで起動して、編集中のHTMLファイルのリアルタイムプレビューを行う“ライブプレビュー”といったユニークな機能を備える。

という非常に革新的な機能が付いたエディターである。

インストール

まず先ほどのリンクからトップページに飛んでダウンロード→インストールを行う。

使ってみる

ではさっそくBracketsを用いて前回作ったindex.htmlを開いてみよう

f:id:gsmcustomeffects:20160305033139p:plain

こんな感じになるはずだ。

これでBracketsの右上の雷マークをクリックしてみてほしい

f:id:gsmcustomeffects:20160305033241p:plain

これはリモートデバッグモードといって上記で示したようにオフラインで実際のプレビューをリアルタイムに行うものだ。

以前まではこの機能は有料ソフトのみで使える機能でユーザーはコードを書く→ブラウザで更新をクリックをする必要があった。
だがこれによりリアルタイムで編集を行うことができかなり作業効率が上がる。

なにか打って保存するとそのまま反映されると思う。

なにかを作る

とりあえずHTMLのサンプルを見ながら見出しみたいなのを打ってみた。
基本HTMLは<><>でくくりながら記述する

f:id:gsmcustomeffects:20160305034513p:plain

だけどまあなんか味気がない。
ここでCSSが出てくるわけなんだがこれは実際のサイトを見てもらったほうがわかりやすい。

BlogTemplate


やっていることは

  • HTMLで記述
  • CSSでインデントなどを補正

みたいな感じである。

CSSを外すとこのようにすべてが左寄せになって非常に見にくくなるわけである。
f:id:gsmcustomeffects:20160305035108p:plain

これでCSSの重要さがわかったと思う。

まとめ

  • Bracketsをいじれた
  • h1タグを使うことができた
  • CSSの機能がわかった

次回はもう少し本格的に見た目を作る方法例などを示す。

あとはHTMLなどは使いながらその都度調べていくのがいいと思う。今回はh1とかおもに見出しに使われるタグを例に使ったがpという段落タグというものもある。
基本的なサンプルソースは僕のサイトのWebサンプルの部分においてあるので読んでみてほしい。