Site Title サイトのタイトル

サイトディスクリプション、またはキャッチコピーなどを記入してください
Home > (パンくず)

本文の文字サイズは100%に設定

本文の文字サイズは%で指定しています。PCブラウザで横幅が800pxより広い場合は、100%の文字サイズになります。100%ってどういうことかというと、ブラウザの基本設定に合わせているということです。ブラウザの基本設定で大きめに設定している方は文字が大きく見えるし、小さく設定している方には、小さく見えることになります。

通常デフォルトでは、16pxに設定されている場合が多いですね。デザイン的には少し小さめの方がかっこいいかもしれませんが、これくらいのサイズの方が読みやすいと思います。タブレットやスマートフォンでご覧になられた場合は、PCブラウザより若干小さくなるように設定しています。

画像の回り込み設定

本文に画像を入れる場合、文章の回り込みを設定できます。画像を左側に配置したい場合は class alignleft を選択、右側に配置したい場合は class alignright を選択してください。文字の回り込みを設定せずに、中央に画像を配置したい場合は class aligncenter を選択してください。大きな画像を配置する場合はこれが便利ですね。

配置に関してはPCブラウザもタブレットやスマートフォンでも同様に設定できますが、タブレットやスマートフォンの場合は、画像のサイズにも注意を払わなければなりません。このテンプレートではそこまでの設定はしておりませんので、各自で設定して頂く必要がございます。

<section>タグを使用する際のポイント

section要素は、HTML5から新たに追加された要素です。ブログなどを作る場合は、記事がそれぞれ分離していますので、<section>で独立させることができます。しかしホームページで注意しなければならないことは、レイアウト目的のコンテナ要素として使用してはいけないということです。もしレイアウト上使用するのであれば<div>ダグを使用しましょう。

このテンプレートの主な特長は下記の通り

基本的なページに最低限必要なスタイルだけを取り入れて、シンプルなページを作成しました。構造もわかりやすくしていますので、いろんな応用が利くと思います。

▲ページのトップへ