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

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

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

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

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

動画解説:約2分6秒

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

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

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

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

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

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

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

→ 単語登録の詳しい手順:Windowsの場合(※別窓で開きます)

→ 単語登録の詳しい手順:Macの場合(※別窓で開きます)

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

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

動画解説:約2分34秒
>> 静止画の解説を見る(※別窓で開きます)

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

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

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

文章を入力しましょう。

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

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

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

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

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

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

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

初心者向けマニュアルトップに戻る