お知らせトップページ
(左メニュー、 列有り/無し組み合わせレイアウト)

ページの大きさは、横幅 960ピクセル 固定になっています。
横幅の合計は960 ピクセル以下にしてください。

1.3列組のサンプル

■ 各地の最高気温の予報
最高気温予想
平年より2〜4 ℃ 高い予報
■ 3列(右から 400px 370px 130px)

右の画像サイズは、幅400 x 高さ320 です。

2.テーブル使用のサンプル

    リンク
■ テーブルを使って割付

サンプルテーブルは、横1行, 縦3列 です。

セル間の空白を左右 20px, 上下 5px としています。

■ 各地の最高気温の予報
最高気温予想
平年より2〜4 ℃ 高い予報

3.列組なしのサンプル

適当に改行を入れながら、下方へと伸ばしていきます。
以下は 900 x 600 のサンプル画像です。中央寄せにしています。

あべのハルカス
あべのアルカス

修正方法 (以下ブラウザで表示を確認しながら作業をすすめる)

  1. 最初にタイトルを変更して、作業の感覚をつかみます。(お知らせホームページの作り方 その2 を参照)
  2. 以下画像の左側は3列組のサンプル、右側はテーブル使用のサンプルです。日本語部分を変更してブラウザで確認します。 @ スペースの連続はスペース1個として処理されます。
    A スペースをいくつか追加したい場合は、  (半角6文字)を並べてください。
  3. 画像がある場合は、gazo フォルダに画像を置いた後、<img src= 〜 行の画像ファイル名、幅、高さなどを変更します。
  4. 画像の表示位置を変更したい場合はマーカー部分をコピー(もしくは切取り)し、所定の位置に貼り付けます。
    (画像部分の説明は、お知らせホームページの作り方 その3「html の説明」を参照)

    html ソース

  5. ブラウザ表示を自分のコンテンツだけにして作業を進めたい場合は、不要部分を削除します。
    (記述方法参照のために残しておいて、最後に削除してもよい)
    a) 上記列組みサンプルの片方が不要の場合は、片側のマーカー行を削除する。
    b) この説明ブロックも削除する場合は、以下のマーカー行を削除する。
        行数が多いので削除位置をよく確認してください (サブタイトル名で開始位置を探す)

    修正説明の範囲

  6. 列のサイズを変更したい場合は base.css を変更します。
    (スタイルシートの説明は、お知らせホームページの作り方 その3「css の説明」を参照)

    クラスとcss   a)  css ファイルを Mery エディタで開けると左のように色分けして表示されます。
    黒字の部分だけが変更可です。サイズ変更はアンダーライン部分を変更してください。
    b)  変更後、アンダーライン部分の数値の合計が 900 になっていることを確認してください。
    (マージン部分 40px を含めると 940px になります)

  7. 列組なしのコンテンツを追加する場合は、「3.列組なしのサンプル」部分を修正して使用します。
    改行は改行したい位置に <br /> を置きます。 <p> 〜 </p> で囲むと1行空きになります。
    <p class="blkcenter"> 〜 </p> は、中央揃えになります。

    html ソース

  8. 列組ありのコンテンツを追加する場合。
    上記2.説明画像のマーカー行をコピーし、追加したい行の左端へカーソルを当てて貼り付け後、内容を変更します。
    (行番号は変わっている場合があるので内容を確認してください)

    この時、列幅も変更したい場合は

    1. 上記6.説明画像のマーカー行(69〜87行目まで)をコピーし、88行目の左端にカーソルを当てて貼り付け後、サイズを変更します。
      (変更サイズの合計はマージンを含めて 940px にしておいてください)
    2. 同じ名前は使用できないので、名前の後ろに番号を追加します。以下画像のように、追加行のクラス名も同様に番号付きに変更してください。
        .widefixrit    →    .widefixrit2  
        .widefixmdl    →    .widefixmdl2  
        .widefixlft    →    .widefixlft2  
      html ソース
      2列にする場合は、上2行を使用し、横幅の合計がマージンを含めて 940px になるように調整してください。

    テーブルの列幅を変更する場合の例

    1. 以下画像の右側 html テキストは、上記6.の内容を列幅の説明に使用したものです。
    2. <table> 〜 </table> ブロック内の、幅を変更したい<td> に記述されているクラス名Aを確認します。
    3. 以下のA赤枠をコピー & 175行目に 貼り付けし、上記8.2 のように名前の後ろに数字を追加します。
      幅を変更したい<td> のクラス名Aの後ろにも同じ数字を追加します。
      以下のように、A + B の合計は@のサイズ以下にしてください。@はテーブル全体の幅になっています。

      tdサイズ

  9. メモ
    a) コピー、削除、変更 などの操作は、
        閉じる記号(<div> 〜 </div>,<p> 〜 </p>,”〜   など)に注意してください。
        閉じる記号を忘れると表示がおかしくなります。
    b) 各コンテンツはタイル上(<div class="tile10"> 〜 </div>)に配置してください。
  10. リンクの作成
    ページ間を行き来できるようにリンクを張っておきます。以下のマーカー部分を自分のサイト名に変更してください。
    @ はファイル名です。次の作業 11.で付ける名前を記述します。1行目は index.html にしてください。
    A はサイトのタイトルです。カーソルを当てるとコメントとして表示される場合があります。
    B はリンク先名としてブラウザに表示されます。

    リンクの作成

  11. 2ページ目の作成
    ページ名は自由に作成できます。メニュー順に番号を追加しておくと分かり易くなります。

    新ファイル作成    左図のように、上記作業で仕上げた index.html ファイルをコピー & 貼り付け 後、名前を変更して2ページ目ファイルを作成します。
    2ページ目も index.html と同様に元の内容を変更して仕上げていきます。
最初は、少し修正してブラウザで修正部分を確認するようにしてください。