お知らせホームページの作り方 (その3)
このページは「上メニュー、 縦1列レイアウト」見本兼用です
画面配置図
画面上の各コンテンツのスタイルは base.css(スタイルシートファイル)に記述されています。
以下のタイル(tile00 〜 tile90)の役割を参考に画面レイアウトを決めてください。
タイトルとフッターは用途が固定されています。
メインのコンテンツは、下図のように <class="tile10"> タイル上に配置してください。列に分割する場合も、このタイル上で行います。
ゴールド色の枠部分は空白(10ピクセル)です。
列組みの横幅計算方法は
トップページ をご覧ください。
html の説明
以下のように箱型の始めと終わりの位置を縦に揃えて記述しています。
サブタイトル(黄色マーカー)の上の行 <div class="tile10"> はタイルの始まりになっています。(青色マーカー)
<div> 〜 </div> などは入れ子で使用できますので、後の </div> は縦位置を基準に探してください。
コピーや削除はマーカー行をまとめて行ってください。
【以下例】
a) 88行目〜97行目 を再利用する場合は、86,87行目のコメント行も含めて コピー & 貼り付け すると見易くなります。
行の貼り付けは、貼り付け予定行の左端にカーソルを置いてから「貼り付け」処理をしてください。
b) サブタイトルを追加する場合は、黄色マーカー行をコピー & 貼り付け 後変更する。
c) 画像表示を追加したい場合は、93行目〜95行目までをコピー & 貼り付け 後変更する。
追加画像の表示位置も同様に利用したい場合は、上下行を含めて(92行目〜96行目まで)コピーする。
上記説明の 93行目 は画像表示の記述です。画像の置き場所と名前(src)、幅(width)、高さ(height) が必要となります。
代替テキスト alt="〜" は、ブラウザ上でカーソルを当てると記述内容が表示される場合があります。
画像サイズは、ファイルにカーソルをを当てると右のように 幅(400) x 高さ(320) が表示されます。
css の説明
スタイルシート (css) と html の関係は以下のようになっています。
以下のアンダーライン部分が修正できます。
マーカー部分は html からの呼び出し名です。
【css 変更例】気候の画像枠を 20 ピクセル大きくし、その分説明文枠を小さくする場合
@ width: 400px; → width: 420px;
A width: 370px; → width: 350px;
データの保存
修正前のコピーを保存しておきます。
(手順)
a) 保存用フォルダを開けて、新しいフォルダを作成し適当な名前(日付でよい、サンプルは 20180801)を付けておく。
b) 自分のフォルダをコピーし、上記 a) で作成したフォルダの中に保存する。
(フォルダ内のファイルを全選択コピーし、上記 a) 作成フォルダへ保存する方法でもよい)
コピー & 貼り付け方法
@ 自分のフォルダにカーソルを当て、cntlキー を押しながらアルファベットの c を押してコピーする。
・分かりにくい場合は、ホームリボン上のアイコン(選択、コピー)を使用してください。(上記画像参照)
A 上記 a) で作成したフォルダを開けて、cntlキー を押しながらアルファベットの v を押してペーストする。
・分かりにくい場合は、ホームリボン上のアイコン(貼り付け)を使用してください。(上記画像参照)
ダウンロードをクリックすると、このページレイアウトを含む3ページがダウンロードされます。
解凍後、テキスト及び写真などを変更しながら仕上げていきます。