サイト作るよ06-エディタDL

前回までで画像の準備が終わりました。今度はそれを記述していきます。
最初からガッツリ書かないので多分大丈夫!

1から作る気はないけど10年前に作ったサイトちょっと直したいな~みたいな方も、このエディタは入れておくと便利ですよ~


サーバーなどは後回し

サイトは基本的にインターネットへファイルを上げなくても自分で作ったhtmlページは見れます。

サーバー契約とか先にやっちゃうと後戻りしにくいし気軽にお試し感覚で作れないかもしれないので、ローカルで作ってみるとよいです。

テキストエディタをDLする

テキストエディタというのは、htmlを書いていくソフトのことです。

有名なものはサクラエディタ、Sublime text、Atom辺りですが私はVSCodeというエディタを使っています。adobeCCが入っていればdream weaverという手もある。ここではVSCodeで進めます。サイトは英語ですがとりあえずDL&インストールします。ちなみに無料です。

Visual Studio Code

拡張機能を入れる

ソフトがDLできたら早速起動してみます。VScodeは自分で拡張機能を開発したり公開したりできるのでとにかくエクステンション数が多いです。カスタマイズするといろいろ幸せになれます。

拡張機能はソフトの左端に縦に並んでいるアイコンの多分一番下(四角いアイコン)を押してほしいものを検索。下記のプラグイン名を入れてください。緑色のインストールボタンクリックで完了です、かんた~ん。

私のおすすめはこれです。

Japanese Language Pack for Visual Studio Code

まずは日本語化です。インストール画面に使用方法が書いてあるので、それに従って設定します。

vscode-icons

作業フォルダ一覧に分かりやすいアイコンを付けてくれます。

こんな感じ。

アイコンを変える拡張機能は他にもたくさんあります。なぜか全てのアイコンがニコラス・ケイジの顔写真になる拡張機能もある…謎。

Live Server

編集中のhtmlを保存すると自動でブラウザプレビューを更新してくれます。リアルタイムで確認しながらコーディングできる。デュアルモニターの方とか超使いやすそう。これはhtml編集中に画面下の青いバーにある「Go Live」を押すと自動プレビューが立ち上がります。

こんな感じ。

Trailing Spaces

不要なスペースを赤くハイライト。保存時に自動で不要スペース削除してくれたりもします。無駄な余白が許せないプログラマーさん歓喜。

Clipboard Ring

コピペって、1つの単語までしか覚えてくれないじゃないですか。これを使えば10個くらい前のコピーまで余裕で記憶してくれて、自由に選んで使えます。貼り付ける時にctrl+Shift+Vを連続で押せば古いコピーが順番に出てきます。

こんな感じ。

Auto Rename Tag

タグの名前をいじる時、例えば<p>をやっぱり<div>にしたい…という時、普通に編集すると対応した閉じタグ</p>とか</div>まで同時に変わってくれます。

こんな感じ。

IntelliSense for CSS class names in HTML

htmlに記述したCSSファイルを読み込んで、クラス名を書く時にCSSファイルの中から候補を出してくれます。

こんな感じ。

indent-rainbow

後述するインデントに色を付けて分かりやすくしてくれます。VSCodeはデフォルトで縦線が入るようになっているのであまり困らないのですが、色が付くと「このタグはどこからどこまで」というのが分かりやすい。

こんな感じ。

SFTP

htmlやCSSが書けたらFTPソフトでネット上にアップロードしていく訳ですが、これを導入しておくといちいちFTPソフトを立ち上げなくてもVSCode上でアップできます。dreamweaverみたいな感じです。設定をいじる必要があるので入れたい場合はググってください。

これらの拡張機能を併用することで、どんなに無知でズボラな人間でも綺麗に整ったコードしか書けなくなってしまうのだ。

作業フォルダを開く

htmlを編集したり保存したりするサイトフォルダ、ここでは前回作ったとなりのリクたんフォルダを開きます。

書こうとしたらアップデートで若干仕様が変わっていましたが、ファイル>フォルダーを開く からとなりのリクたんフォルダを選択。以後作ったhtmlや画像ファイルなどはこの新規ファイルみたいなアイコンから一覧できます。

index.htmlを作る

とりあえずは新規ファイルを作成しましょう。ショートカットキーはctrl+Nです。
ちょっと前の画像なのでアイコン等が違っていますが気にしないでください…

↓これをコピペしちゃいます。(列番号は不要)
htmlにも新しいの古いのとバージョンがあるのですが、これが今現在の基本タグです。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
</head>

<body>
    <p>テスト</p>
</body>
</html>

全部ソラで打てるようにならなくても全然大丈夫です、コピペで…。エディタによっては新規ファイル作ろうとするとデフォルトでこのタグが入ってたりもします。

コピペできたら保存。ctrl+Sです。
ファイル名はindex.htmlにして、前回作った「となりのリクたん」フォルダに入れます。

index.htmlができました。ダブルクリックで開いてみると、一行「テスト」と出てきたはず。あとブラウザタブには「ページタイトル」と書いてありますか?上記のタグ6行目をサイト名に変えるとタブ名が変わります。

このタグの説明をざっくり。

htmlって、<○○>~</○○>というブロックを作ってその中に要素を入れていく感じです。

次回はbodyの中身

ボディがガラ空きだぜ!ということで、headはちょっと置いといて次はbodyに本文を書いてみます。