ホームページスタイルシート一覧
タイトルのスタイルシート class="title-red"
class="title-red"
タイトルのスタイルシート class="title-orange"
class="title-orange"
タイトルのスタイルシート class="title-orange"
class="title-orange"
タイトルのスタイルシート class="title-pink"
class="title-pink"
タイトルのスタイルシート class="title-gray"
class="title-gray"
ページ制作についてのメモ
ページに掲載する記事は、 <p> から </p> の間に文章を入れるようにしてください。
そうすることにより、今回設定したスタイルシートに記録された、適度な行間とマージンが割り当てられます。
タイトルに関しても記事と同様に、 <p> から </p> の間にタイトルにしたい文字列を入力し、タイトル用のスタイルシートを適用してください。
タイトル用のスタイルシートは、上記の通りとなります。
※タイトルに関しては、 <p> ～ </p> ではなく <div> ～ </div> でも構いません。使用しているソフトによっては <div> ～ </div> の方がやりやすいという場合もあるかと思いますので、その場合は <div> ～ </div> を使用してください。
以下は、タイトル用のスタイルシート一覧です。
※スタイルシートファイル（main.css）内で定義されているスタイル名です。
#contents .title-red
#contents .title-green
#contents .title-orange
#contents .title-pink
#contents .title-gray
<p> ～ </p> とは段落を意味し、html上では段落単位でスタイルシートが適応されます。
<p> ～ </p> のタグを生成するには、デザインビュー上でEnterを押してください。
Shift + Enter だと改行 <br /> 扱いになります。
実際に当ファイルのデザインビューとコードビューをよく比較してみると、タイトル、記事の文章（段落）単位で <p> から </p> に分けられていることが良く判ると思います。
イメージ（写真）を使用する場合のメモ
写真を貼り付ける場合、文章と写真が近くにある場合以下のようなイメージとなります。
写真を右寄せ左寄せさせる場合は、スタイルシートをそれぞれ適応してください。
写真に注釈をつける場合は、注釈文の手前に改行を <br /> 挿入してください。また、代替欄 (alt="") にも写真の説明を記入してください。
詳細は、以下の各記事をコードビューで確認してください。
注釈の例
写真の注釈
写真にスタイルシートを適応させていない場合
写真の注釈
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
※スタイルシートが適応されていないと、写真の注釈が大きいままになっています。
左寄せを行う場合（class="photo-left"を適応）
写真の注釈
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
左寄せを行う場合（class="photo-right"を適応）
写真の注釈
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
中央揃えを行う場合（class="photo-center"を適応）
写真の注釈
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
昨年、約４００名の参加者が集い、北海道・大沼で開催された「大沼ふるさとの森づくり」。そこで参加者が額に汗し、つくったポット苗の約７割が芽を出し 鮮やかな緑葉をつけました。北海道の厳しい冬を越え、春を迎えたどんぐりたちは、元気に育った姿で、今年も私たちが北海道を訪れるのを待っています。東労組の各地本が持参した本州のどんぐりたちは、残念ながらあまりよい発芽状態にはありません。いま北海道の仲間たちが、懸命に面倒をみてくれています。
写真を２列で表示させたい場合（class="photo-left-2line"を適応）
写真の注釈
写真の注釈
写真の注釈
写真の注釈
写真の注釈
写真関係でレイアウトが崩れる場合の対処法 Before
下記のように、写真と短めの文章を交互に使用した場合などに発生するレイアウトの崩れは、次のように各要素の改行を行うことで修正することが可能です。
このように
昨年、約４００名の参加者が集い、北海道・大沼で開催された。
このように
昨年、約４００名の参加者が集い、北海道・大沼で開催された。
２列表示の写真の片側が注釈が長い場合時や写真と文章を交互に設置する場合に、レイアウト崩れが多く発生します。
昨年、約４００名の参加者が集い、北海道・大沼で開催された。
写真関係でレイアウトが崩れる場合の対処法 After
改行を行いたい部分にソースコードビューで <div style="clear:both;"></div> と入力することで各行をクリアすることができます。
以下は、上記の崩れた記事の間に <div style="clear:both;"></div> を挿入してみた例です。それぞれをソースコードビューで見比べてください。
このように
昨年、約４００名の参加者が集い、北海道・大沼で開催された。
このように
昨年、約４００名の参加者が集い、北海道・大沼で開催された。
２列表示の写真の片側が注釈が長い場合時や写真と文章を交互に設置する場合に、レイアウト崩れが多く発生します。
昨年、約４００名の参加者が集い、北海道・大沼で開催された。
※<div style="clear:both;"></div>を挿入した次の要素から改行されて表示されます。