無料ホームページテンプレート Template Party

初心者向けマニュアル公開中。完全無料でホームページを公開しよう!動画マニュアルつき。

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

「パン作りのこだわり」ページを作る

サンプルテンプレートの状態では以下の画面です。
中身を一旦全て削除し、新しい画像を配置してコメントを入れる作業を行いましょう。

不要なブロックを削除していきます。

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

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

静止画の解説を見る

  1. アイコンをクリック。
  2. 以下の画像のようにsectionが選択状態になったら、
  3. その状態のままでクリック
  4. Elementsパネルでsectionが選択されているのを確認したら、キーボードのdeleteキーを押す。
  5. 2ブロック目のsectionも削除します。
    同じ要領で選択アイコンをクリック。
  6. sectionが選択されたらクリック。
  7. 再びdeleteキーで削除。
  8. 3つ目のsectionも同じ手順で削除します。
  9. 以下のように内容が削除されればOKです。
    そのまま(※保存やプレビューはしない)の状態で次のステップへいきます。
  10. 上から2行目の「html lang...」の行をクリック。
  11. 「Ctrl(macは⌘) + C」でコピー。
  12. Sourcesタブをクリック。
  13. 2行目の先頭にカーソルを合わせて
  14. 一番下までスクロール
  15. 「Shift + クリック」で選択
  16. 「Ctrl(macは⌘) + V」でコピーしておいた情報を貼り付けます。
  17. 「Ctrl(macは⌘) + S」で保存しましょう。



このページのイメージ画像を配置します。

画像を用意してimagesフォルダに入れておいて下さい。サンプルでは以下の画像を使う事にします。

画像タグをパソコンに単語登録しておきます。

Google Chromeのデベロッパーツールはあくまで検証ツールであってホームページ編集ソフトではありません。
画像を簡単にhtml上に配置できればベストですが、方法がないようなので、手打ちで入れていきます。
ただ、タグの土台はパソコン側に単語登録しておき、必要最低限の情報だけ入れ替えて使えるようにしましょう。

単語登録を理解している人は、以下のタグを「いめーじ」で変換できるように保存しておいて下さい。
<img src="images/●" width="300" alt="">

単語登録がわからない人は以下のいずれかをクリックして詳細を見て下さい。

単語登録の詳しい手順:Windowsの場合

  1. デスクトップ上にある文字を右クリック
  2. 「単語の登録」を選択。
  3. 「単語欄」に、
    <img src="images/●" width="300" alt="">
    (※上記をコピペして使って下さい)
    と入力し、「よみ」にひらがなで「いめーじ」と入力。
    保存ボタンを押します。
  4. 確認します。
    「ユーザー辞書ツール」をクリック。
  5. 以下のように今登録したデータが入っていればOKです。
  6. これで「いめーじ」と入れて変換ボタンを押すだけで候補としてimgタグが出てくるようになりました。

単語登録の詳しい手順:Macの場合

  1. デスクトップ上にある「文字」をクリック。
  2. 「ユーザー辞書を編集」を選択。
  3. 「+」をクリック。
  4. 入力欄にひらがなで「いめーじ」と入力。
  5. 変換欄には以下のimgタグを入力。
    <img src="images/●" width="300" alt="">
    (※上記をコピペして使って下さい)
  6. 以下のように登録されたらOKです。
  7. これで「いめーじ」と入れて変換ボタンを押すだけで候補としてimgタグが出てくるようになりました。



では、画像を配置しましょう。

パン作りのこだわり(about.html)を開いて編集していきます。

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

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

静止画の解説を見る

  1. 広い空間ができているのでそこに入力していきます。
  2. 単語登録しておいた「いめーじ」を入力して変換。

  3. 「●」部分を削除して画像ファイル名を入力していきます。
  4. 画像ファイル名、何だったっけ…という場合は、
  5. クリック。
  6. imagesフォルダをクリック。
  7. 確かこの画像だったと思いますが、確認する為にクリック。
  8. 間違いないようですね。
  9. about.htmlタブをクリックして編集に戻ります。
  10. ファイル名を手打ち入力。

  11. 手打ちが面倒な場合は。
  12. 右クリック -> Renameを選択
  13. ファイル名が選択状態となるのでそのまま「Ctrl(macは⌘) + C」でコピーします。
  14. あとは編集画面に戻り、「Ctrl(macは⌘) + V」で貼り付けて終了。
  15. 画像ファイル名を入力し終えたら「Ctrl(macは⌘) + S」で保存し、
  16. 「Ctrl(macは⌘) + R」でプレビュー。
  17. 見てみると、画像が少し小さいようです。
  18. 単語登録しておいた画像の幅を300pxに指定していた為なので、
  19. サイズ指定を削除します。
  20. 再び保存。
  21. プレビューしましょう。

    準備された画像の幅がウィンドウ幅より小さい場合、その画像の実寸サイズで表示されます。




画像のalt属性を入力しましょう。

alt=""となっている部分に読みを入力しましょう。
装飾画像などで、適当な読みがない場合は空のままalt=""で結構です。

文章を入力しましょう。

文章は段落タグ<p>タグで囲むのが一般的です。

改行は<br>です。
とりあえず勉強なので、適当に文章を入力していきましょう。

全体を見てみましょう。
改行が頻繁に入っているので文字が左によって見えますが、実際のサイトであればもう少し長い文章になるので気にせず次のステップへ進みます。

補足:その1
imgタグも段落タグで囲むか、テキストと同じ段落タグ内に入れてしまえば幅が揃ってきれいに見えます。
以下はimgタグを段落タグで囲った例です。幅も揃いますし、画像と下の文字列に適度な余白もできました。

補足:その2
主な配布テンプレートには、テキストを中央寄せ(センタリング)する装飾用のスタイル設定がほぼ全てに入っているのですが、今回利用の初心者向けテンプレートには入っていませんでした。
初心者向け「以外」を使っている場合は、
<p class="c">ここに文章</p>
とするだけでテキストがセンタリングされます。試してみて下さい。

※このテンプレートは、この指定だけではセンタリングできません。

>> NEXT:アクセスページを作る

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