HTML/CSSをきちんと理解するために勉強してみる

このサイト、そこそこ綺麗にまとまっているように見えるけど、よく見ると所々スタイルが崩れていたり、必要なものが揃っていなかったりする。それもそのはずで、無料テーマのoriginを浅い知識でいじりまくってたためこんなことが起きている。HTMLもCSSも小学生レベルの知識しか無いにも関わらず、せっかくのWordPressだからと少し格好つけてみたかったのだ。

イメージに近いテーマを数日掛けて選んでも、どこかしっくりこないものである。そこでテーマ改造に手を出したら最後、スタイルが崩れて手に負えなくなる。生半可な知識ではテーマの呪縛からは逃れられない。

正しくテーマをいじるためにはやっぱりHTML/CSSをきちんと理解しておく必要がある。そしてそれができているなら、少し頑張れば自分でテーマを作ることも可能である。そういった記事を見て、WEB言語も身に付けておいて損は無いよなーと考え、基礎の基礎から勉強してみることにした。目標はWordPressテーマの完全自作だけど、そうなるとPHPやJavascriptの知識も必要になるらしい。なのでまずはHTML/CSSのみを使ったローカル環境での作り込みを目標にする。

教材・参考サイト

以下を参考にして勉強を進めていく。Progateはプログラミング学習サービス。つい先週少し触ってみたけど、有料会員も考えるほど良いサービスだった。

環境構築

作業用フォルダとして、Dドライブ直下にtry_htmlフォルダを作成した。FPGA開発のときと同じで、ファイルパスに日本語が入っていることが原因の不具合に遭遇したくない。htmlの確認用ブラウザはChrome。エディタはVS Codeを使用したい。

VS Codeをhtml/css向けに設定

まずファイル>基本設定>設定から「settings.json」ファイルを開き、”editor.renderIndentGuides”をtrueにした。これでインデントに縦線のガイドが引かれるようになるため、タグの視認性が上がる。続いて以下のプラグインを導入。

HTML Snippets>HTML5に対応した追加スニペット。

IntelliSense for CSS class names>CSSクラスの入力補完プラグイン。

HTMLHint>HTMLの静的解析ツール。エラー箇所に下線と内容を表示してくれる

Live HTML Previewer>VS Code内でHTMLの表示をプレビューできる。Javascriptには未対応。

VS Codeの動作確認

VS Codeの “フォルダを開く” から、はじめに作っておいた「try_html」フォルダを開く。そして “ファイルを追加” から「index.html」と「stylesheet.css」を作成した。

保存したらファルダ内にファイルが作成されていた。続いてそれぞれのファイルに以下を記載した。

<index.html>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>KAMAKURIUM</title>
</head>
<body>
<h1>MyFirstHTML!!</h1>
</body>
</html>

<stylesheet.css>

h1 {
color: #07b496;
}

 

htmlファイルをChromeに投げたら・・・cssでスタイルを付けた通りの色で表示された!MyFirstHTML!!

続いてLive HTML Previewerを使用してVS Code内で表示を見てみる。IME(日本語入力)をoffにした状態で[Ctrl]+[q]>[s]を実行。cssが反映された状態で、プレビューが表示されるらしい。……何か小さいけど表示された!!(笑)MyFirstHTML!!

次回から勉強が開始できそうです。