Template Party

Google Chrome(グーグルクローム)を使ってhtmlを編集してみよう

Chromeが入っていない場合はインストールから

chromeのアイコンがPC内にあるか確認してみて下さい。
入っていない場合はChromeからインストールしておきます。

WindowsやMacなど、使っているブラウザに合わせて自動でダウンロードページが切り替わると思いますが、他のブラウザ用でダウンロードしたい場合は、ダウンロードボタンの下の「別のプラットホーム向けのChromeをダウンロード」をクリックしてブラウザを選択して下さい。

編集準備に入ります。

  1. テンプレートのindex.htmlを右クリックし、「プログラムから開く」->「Google Chrome」を選択します。
    Chromeで開いたら、ウィンドウ右上にあるメニューボタンをクリックし、「その他のツール」->「デベロッパーツール」を選択。
    (※画像内の再生ボタンを押すと動画が再生されます。約32秒。)

    ツールの配置場所について。
    今回はPC(横長)レイアウトの確認をするのでツールを下に配置したいと思いますが、もしツールが下にない場合は、以下のメニューアイコンをクリックし、出てきたレイアウト設定から下にツールを配置する(Dock to buttom)アイコンを選択してみて下さい。

  2. テンプレートを編集できるようにします。
    以下の動画のように中央のブロックにテンプレートフォルダをドラッグ&ドロップしてきます。
    又は「Filesystem」パネルのすぐ下にある「+ Add folder to workspace」をクリックしてフォルダを選択する方法でもいいと思います。
    画面上部に「許可 or 拒否」の警告が出ますので「許可」をクリック。これで編集を直接加えられるようになります。
    Filesystemタブをクリックして開いた状態でindex.htmlを選択し、htmlコードを出して次のステップに進みましょう。
    (※画像内の再生ボタンを押すと動画が再生されます。約19秒。)

    ※ひとまず、Chromeで編集できる方法として上記方法を紹介させて頂きましが、設定方法は他にも(もっとよい方法も)あると思います。時間があれば他の紹介サイトなども調べてみて自分に合う方法を探してみて下さい。

補足:パネルの開閉

初期段階では、プレビュー以外に3つのパネルが開いていると思いますが、開閉できます。
中央パネルは編集に使うので常時表示しますが、左右パネルは邪魔な場合は閉じておいてもいいでしょう。

>> NEXT:メニューを入れ替えよう。

<< 「初心者向け講座」メニュー一覧に戻る