Template Party

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

「アクセス」ページを作る

アクセスページはabout.htmlをコピーして新規制作したファイルでしたね。
ここの「talbeサンプル」というブロックを利用してページを作ってみましょう。

「パン作りのこだわり」ページの時と同じように、不要なブロックを削除します。

(※画像内の再生ボタンを押すと動画が再生されます。約2分13秒。)

※「Elements」パネルでの作業中は、再読み込みしない&ページ移動しない!
プレビュー画面からリンクで他のページに移動したり、再読み込みをかけるとせっかく編集した情報がリセットされるので注意して下さい。
また、「Elements」パネルで編集した情報はそのまま保存する事ができません。htmlが保存できるのは「Sources」パネルで行った編集のみです。

静止画の解説を見る

  1. アイコンをクリック。
  2. できればtableのブロックだけを選択したかったのですが、
  3. Aboutのブロックも同じsectionブロックに入っているようなので、ひとまずそのまま残します。
  4. 次のsectionブロックが選択されたらクリックし、
  5. そのままの状態でdeleteキーを押して削除します。
  6. 次のブロックも同じ手順で削除します。
  7. 以下のように最初のsectionブロックだけ残ればOKです。
  8. 続いて、上から2行目の「html lang...」の行をクリックし、
  9. 「Ctrl(macは⌘) + C」でコピーします。
  10. 「Sources」タブをクリック。
  11. 2行目の先頭にカーソルを合わせたら、
  12. 一番下までスクロール。
  13. 「Shift + クリック」で選択したら、
  14. 「Ctrl(macは⌘) + V」でコピーしておいたタグを貼り付けます。
  15. 最後に「Ctrl(macは⌘) + S」で保存しましょう。



残っていたAboutブロックを削除し、tableを編集します

(※画像内の再生ボタンを押すと動画が再生されます。約3分59秒。)

※「Elements」パネルでの作業中は、再読み込みしない&ページ移動しない!
プレビュー画面からリンクで他のページに移動したり、再読み込みをかけるとせっかく編集した情報がリセットされるので注意して下さい。
また、「Elements」パネルで編集した情報はそのまま保存する事ができません。htmlが保存できるのは「Sources」パネルで行った編集のみです。

静止画の解説を見る

  1. アイコンをクリック。
  2. Aboutが選択されたら、
  3. クリックして、
  4. キーボードのdeleteで削除。
  5. すぐ下の行も削除。
  6. いつものアイコンをクリックしに行きますが、
  7. ショートカットがあるので覚えておきましょう。
  8. 「Ctrl(macは⌘) + Shift + C」です。
    覚えておいて次回以降はショートカットで利用しましょう。
  9. 見出しが選択されたらクリックし、
  10. ダブルクリックして入れ替えます。
  11. 入れ替え完了。
  12. さっき覚えたのショートカットを使って、
  13. 次に編集したい箇所をクリック。
  14. ダブルクリックして入れ替えます。
  15. すぐ下の行をダブルクリックしてこちらも入れ替えましょう。
  16. さて、最後は地図を入れてみましょう。
    今回はGoogle Mapを使おうと思います。
  17. マップのタグは後で入れますので、今は目印だけ入れておきます。
    今回は「★」のマークを入れてみました。
  18. さっき覚えたのショートカットを使って、最後の行を選択したようと思うのですが、
  19. 1行まとめて選択できませんね。
  20. Elementsパネルで上からコードに重ねておりてくると、1行選択できる箇所があるのがわかります。
  21. 削除したい行が選択されたら、その行をクリックしてdeleteしましょう。
  22. 最後の行がうまく消えました。

    ※前の作業工程に戻りたくなった場合。
    「Ctrl(macは⌘) + Z」を押すと1つ前の工程に戻る事ができます。押すごとにさらに1つ前の工程に戻っていきます。戻りすぎてしまった場合は「Ctrl(macは⌘) + Shift + Z」でやり直しができます。

  23. tableの1行目も同じ手順で削除しましょう。
  24. Elementsパネルで1行が選択できるブロックにきたら、
  25. deleteキーで削除します。
  26. 編集が完了したら、「html lang...」の行をクリックし、「Ctrl(macは⌘) + C」でコピー。
  27. 「Sources」タブをクリック。
  28. 上から2行目の先頭にカーソルを置いて、
  29. 一番下までスライドさせたら、「Shift + クリック」で選択します。
  30. 続けて「Ctrl(macは⌘) + V」でコピーしておいたタグを貼り付けます。
  31. 最後に保存しておきましょう。



Google Mapを入れよう

Google Mapを使って地図を配置します。
Google Mapについては別ページで解説しているので、そちらをご覧頂き、マップのコードをコピーしておいて下さい。

  1. 目印として「★」と入力していたのでこれを直接検索したいと思います。
  2. 「Ctrl(macは⌘) + F」で検索窓を出し、
  3. 「★」と入力すると、該当箇所がハイライトされます。
  4. ハイライトされた★を削除してマップのタグを貼り付けましょう。
  5. 「Ctrl(macは⌘) + S」で保存したら、「Ctrl(macは⌘) + R」でプレビュー確認しましょう。
  6. アクセスページも完成です!あとはトップページのみ。頑張りましょう。

>> NEXT:トップページの編集

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