締切済み

特殊なカラムのデザイン設定について

2014/06/16 02:49

いつもお世話になっております。閲覧ありがとうございます。実は新しいことに挑戦して自己解決できず、宜しければお知恵をお借り頂ければと思います。どのようなことかと言うと１．左カラムのheight部分を100％表示して、position:fixedを使って位置固定とスクロールしないメニュー画面を作りたい。２．左カラムにマウスを乗せるとカラムが右に若干スライドするようにしたい。スライド時、右カラムも左カラムが動いた分、スライドします。以上のようなWEBサイトを作りたいのですが・・・項目１の部分で躓いてしまいました。実は左カラムの部分に右カラムが隠れてしまっています。解決策として左カラムの背面にボックスを作って解決しようとしましたが、別の問題が発生しました。ブラウザのサイズを狭めてスクロールさせると右カラムが左カラムに隠れてしまいます。どなたか解決案を頂けませんでしょうか。お手数おかけ致しますが、何卒ご教授お願い致します。【HTML】 <body> <div id="MasterColumn">  <div id="LeftColumu_z2"> <ol> <li>コンテンツ１</li> <li>コンテンツ２</li> <li>コンテンツ３</li> <li>コンテンツ４</li> </ol> </div> <header> <div id="LeftHeader"> <h1>タイトル</h1> </div> <div id="RightHeader"> <ol> <li>１</li> <li>２</li> <li>３</li> <li>４</li> </ol> </div> </header> <div id="RightColumu"> <h2>コンテンツ２</h2> <h3>コンテンツ３</h3> <h4>コンテンツ４</h4> </div> <footer>フッダー</footer> </div> </body> 【CSS部分】 body{ background-color: #FFE9E7; background-image: none; background-position: top left; background-attachment: fixed; font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", sans-serif; /* フォントを設定 */ color: #333; margin: 0; padding: 0; line-height: 1.5; } #MasterColumn{ width: 1200px; margin-left: auto; margin-right: auto; } #LeftColumu_z1 { float:left; width: 200px; height: 100%; background-color: #FFFFFF; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftColumu_z2{ float:left; position: fixed; width: 200px; height: 100%; background-color: #2C2B30; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header{ float: left; width: 1000px; height: 80px; line-height: 80px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftHeader{ float: left; height: 80px; width: 700px; background-color: #FFFFFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #RightHeader{ float: left; width: 300px; height: 80px; background-color: #920832; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header h1{ display: inline; } header ol,li{ display: inline; } #RightColumu { float: left; width: 1000px; height: 1000px; border: dashed 1px #999; margin: 0; padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { float: left; width: 1200px; background-color: #2C2B30; color: #FFFFFF; text-align: center; }

webyou
お礼率43% (7/16)

CSS
回答数8
ありがとう数11

みんなの回答 （8）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/21 19:32 回答No.8

いえ、不可能ではありません。　ただnavをHTML内で最初にもって行くか、header全体をスタイルシートで左に置くかだけです。・・・いずれも好ましい文書構造ではないですよね。　なお、その範囲ではabsoluteはまったく必要ありません。　あなたのHTMLの文書構造が分かりませんし、具体的なスタイルのイメージがつかめない部分があるので、実例はかけません。　先のHTMLで、「navを先頭に持っていく」「header全体を左」なら簡単にできますから試してください。　ただ、繰り返しになりますが、プレゼンテーションはあくまで文書構造に反したものになってはならない、もしそうしたらユーザビリティの上で齟齬が生じます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/21 18:13 回答No.7

＞目的としてはGoogleみたいな動作をしたいのですが、話が難しくなってきてついていけないです。　仕様書は理解されているとして話を進めるので難しい部分があると思いますが、そのときはかならず仕様書を確認してください。関連する情報へのリンクなども充実しているので。「Googleみたいな」がよくわからないのですが、googleは、javascriptなくても利用できますがデザインは多少変わりますね。　基本的には、まず仕様書の細かい技術的な部分は後回しにして、一旦全部に目を通しておくこと。すくなくとも、何かを調べたいときどこを見ればよいか位はわかるように。そして、率直に書いてみる事です。　私も最初のうちは、色々な解説サイトを見た時期もありましたが、根が理由も理解せずに結果だけ求めるのはしないタイプですで、今では、その方法はまず使いません。原理から入るほうが結果的に断然早いし、応用が利く。　・・・理科も数学もそうしてきた、典型的な理系なのかも・・・　　header全体を高さ100%にして、それに続く要素を右にずらしたり、header:hoverでheaderの位置やサイズ、後続の要素を右にスライドさせるのでしたら、もっと簡単にできますよね。先のサンプルは、ナビゲーションのみだからややこしい。　media別スタイルシートやmediaqueryはとても便利な機能です。フィーチャーホン(media="handheld")やスマホ(media screen and max-width)などでスタイルを変更したりできます。そかし、その前にリキッドで製作しておいた上で、それで足りないものをこれらの機能を使うとして再構築されたら早いと思います。　ただ、ウェブの訪問者、デザインで訪問するかしないかを決める人はまずいない。内容と使いやすいかだけです。デザインに割く時間があれば内容の充実に割いたほうが良いです。　プロとして仕事をするのなら、その時間は対価をもらえますが。　

質問者

補足 2014/06/21 18:43

ご返事ありがとうございます。大変誠意は伝わっております、感謝しております。不可能とは思いたくないですが、不可能ということで別の勉強をすることに致します。ありがとうございましたm(_ _)m

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/21 14:22 回答No.6

＞それではjQueryを使用するのと変わらないため解決にはなりません。　まったく違いますよ。jQueryは、javascriptを使用しています。mediaqueryはスタイルシートです。良く似てますね。　混同されるのも分かりますが・・＞他には頼らずCSSのみで実装できるのか知りたい、　それが、この方法です。　media別スタイルシートは、CSSの機能です。　　media別スタイルシートはCSS2/HTML4.01の機能です。　⇒HTML4.01strict 14.2.4 出力メディア型( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.4 ) 　⇒HTML4.01strict 6.13 出力メディア( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-media-descriptors ) 　⇒CSS2.1 7 メディアタイプ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/media.html ) 　スタイルシートに @media handheld{ section nav,div.section aside{ position:static; } } 　mediaqueryは、CSS3の機能です。　⇒Media Queries( http://www.w3.org/TR/css3-mediaqueries/ )

質問者

補足 2014/06/21 16:46

すみません、よく分かっていないのですがMedia Queriesを使用すれば横スライドした場合にGooleのスマホ版みたいに画面もスライドされるのでしょうか？目的としてはGoogleみたいな動作をしたいのですが、話が難しくなってきてついていけないです。調べたところGoogleもCSS3のみで横スライドさせているとの事で解説サイトもいくつかあるのですが、いずれもスライドされた場合に画面のスライドができませんでした。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/17 10:02 回答No.5

＞この動きをCSS3を使用して作ってみたいと考えていました。　mediaqueryを使います。　私が示したサンプルを確認されたら分かるように、mediaによってスタイルシートが変わりますよね。印刷や携帯電話、テレビではブラウザの持っているスタイルシートが適用されます。　その拡張で、CSS3ではmediaqueryが使えます。

質問者

補足 2014/06/21 13:12

それではjQueryを使用するのと変わらないため解決にはなりません。他には頼らずCSSのみで実装できるのか知りたい、確かめたいから勉強しています。また、現状スライドについても画面全体が固定でスライドにしないのであれば自身でコーディングすることは可能です。 ORUKA1951様の仰る通り、HTML、CSSの作り方の勉強もしなければならないですが、あくまで動作の質問でございますのでご了承ください。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/16 19:50 回答No.4

補足です。スタイルシートの肝心な部分は、 nav{ 　position:fixed; 　top:0;left:0; 　height:100%; } nav>ol{ 　position:relative; 　top:0;width:200px;height:100%; 　z-index:20; } body>header>*,body>section>*,body>footer>*{ 　margin-left:215px; } nav:hover ol{ 　width:300px; } nav:hover+section>*,nav:hover+section+section>*,nav:hover+section+section+footer>*{ 　margin-left:315px; } だけだと言う事が分かると思います。　デザインを元にHTMLは決して書かない。あくまでHTMLには文書構造しか書かない。これが大原則です。　それを元にデザインして行きますから、文書構造とちぐはぐなデザインにはなりませんし、どうしても必要ならアウトラインに支障がないようにDIVで括ったりすることはあります。サンプルはnavをsectionから出してbody直下においています。　このような最低限の追加は仕方ないでしょう。　ただ、忘れてはならないのは、ユーザーはscreenだけじゃない。Googleなども見に来ますし、印刷されるかもしれない。先のサンプルは印刷時にはデフォルトで印刷されるはずです。　デザインに凝りすぎて、SEO的に問題があるページや視覚障害者に障壁を設けてしまったら最悪です。角をためて牛を殺すことのないようにしましょう。　どうしてもボックス的に見せたければ body>section>*,body>footer>*{ margin-top:0;margin-bottom:0; background-color:white; } とすればよいだけ

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/16 18:13 回答No.3

すべてを説明するのは大変です。　私は、それらをすべて仕様書や、HTML5 Doctor( http://html5doctor.com/ )から手に入れました。本はかって携わったこともあるので私自身が使った事はありません。なぜなら、仕様書にすべて書いてあるものを、わざわざ本にするのは仕様書を詳しく知らないときしか恥ずかしくて書けない。無知なうちしか本にしようとは思わない。原稿を書き始めて２ヶ月近くかかります。書店に並ぶ頃には頃には古くなっている。＞カラムのレイアウトについて書籍や参考サイトでdivを主に使用していますが、こちらは止めておいた方が良いのでしょうか。　これがその典型ですね。仕様書のどこにもDIVをデザインのために使うとは書かれたことはない。HTML5では明確に否定されている。!! 　好意的に解釈すると、スタイルシートで右に配置するという説明のために書いてあるだけで、実際に適用するときは<div class="aside">ここは本文とは直接関係ない記事群</div>とマークアップすれば良いのです。　将来、あなた自身が、あるいは他人が内容を変更したり、デザインを変更する時にclass名はその文章の構造を示す物のほうが楽です。＞sectionを用いればメイン部分もなんとか要素のみで組めそうです。　いいえ、ここはとっても難しい部分でして 4.3.3 The section element( http://www.w3.org/TR/html5/sections.html#the-section-element ) "NOTE:The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline." 　section要素は、汎用コンテナ要素ではありません。スタイリングの目的やスクリプトのために必要になったときには、sectionではなくdiv要素を使用することを推奨する。section要素は、その内容が、文書のアウトラインとして明示的にリストされる時に限って使用すべきです。および、 4.4.13 The div element( http://www.w3.org/TR/html5/grouping-content.html#the-div-element ) "NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors." 　他により適切な要素がないときの最後の最後の手段としてdiv要素を表示することをお勧めします。div要素の代わりにより適切な要素を使用すると、読者にはより良いアクセス性を、著者にはより容易な保守性を与える。＞などの『大なり小なり』についてどのような意味はあるのでしょうか？　小なりはないです。(^^) " "(半角スペース)は、子孫セレクタ　　その要素の子々孫々の代まで ">"(大なり)は、子供セレクタ　　直接の子供だけ "+"(プラス)隣接セレクタ　　それに続く並列な要素 section>h3+first-letter { font-size: 200%; font-style: italic; float: left } 　英語サイトでよく見かけるこれは、section 内の直接の子供であるh3要素に続くp要素の最初の文字はドロップキャップする。 CSS2.1の 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) は、プロパティ弄くるより先に、しっかりと身につけないとスタイルシートきれいにかけません。＞【border-boxについて】　例えば 20文字程度は並べたい時に、width:22em;。あるいは一番大きな画像が360px幅なのでwidth:400px;としても、外サイズから決められると不都合ですよね。　これは昔から、内容の幅＝widthだったのですが、悪名高きIEだけは外をwidth幅としていました。そのため世の中ウェブ標準(内容の幅=width)であってもIEだけ、互換モードとして引きずってきました。デザイナーを悩ませてきたいわゆる互換モードです。　私がサンプルでsection{mon-width:630px;padding:5px;}としているのは、外周は640pxと言うことと同義です。borderをどんな幅にしてもかならず内容は630px確保されます。そのほうが楽なはずです。＞header部分などのボックスがスライドされませんでした。　文書構造上・・・内容・意味的に、ある要素の動作によってそれより前にある要素が影響を受けることはありえない。たとえそれをしてもユーザビリティー上もまずいでしょう。　この場合、最も良いのはheaderはnavの前面に置き、nav olはheaderの高さ分下から開始するのが良いでしょう。　巷には、本当におかしな参考書やサイトが氾濫しています。どれがまっとうかを判断するのはとても難しいです。そんなときは常に仕様書をチェックする。それだけで、無駄を省けると思います。　　

質問者

お礼 2014/06/16 20:43

ご返事ありがとうございます。私がやりたかったこと似たサイトを見つけました。jQueryでの実装ですが、動きはこのような感じです。この動きをCSS3を使用して作ってみたいと考えていました。 http://webkaru.net/jquery-plugin/sources/mmenu/demo.html ＞レイアウトについてなるほど・・・確かに無駄なIDクラスを定義するより要素を使用した方が修正変更する上で分かりやすいと感じました。書籍のようにボックスの中から配置していくという考えでは無く、各パーツをパズルのように繋げて一つのWEBを作っていくという感じなのでしょうか。確かにそう考えるとABCという並びをCBAに変える際にCSS部分を変えれば良さそうです。 CSSの設定については、じっくりと勉強してみます。内容が濃く勉強になりました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/16 12:44 回答No.2

そんな難しいものではないので、簡単なサンプルを上げておきます。 HTML5ですが、HTML5はDIVを（原則）使わない。それぞれの要素には厳格に使い道が定められているなど難しいのでHTML4.01strictにされたほうが良いと思います。　ナビゲーションにhoverでサイズが変えたい理由がわからないのですが、一応想像で・・　あえて、navはheaderにもsectionにも入れていません。 ★HTMLには文書構造しか書かれてないのでシンプルで分かりやすいですね。　たったこれだけです。 ★当然、その文書構造にしたがって記述するスタイルシートも簡単になります。　たったこれだけ。分かりやすいと思う。 ★スマホから幅広ディスプレイに対応(センターには寄せていません) ★またデザインに関するものはHTMLにありませんので、将来デザインは自由に変更できます。 ★HTMLさえ、きちんと書ければ後は好きになります。デザインのためにHTML書かない。そのための構造とプレゼンテーションの分離です。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> <style media="screen">  </style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿</header> ＿<nav id="contentTable"> ＿＿<ol> ＿＿＿<li>コンテンツ１</li> ＿＿＿<li>コンテンツ２＿＿＿＿<ol> ＿＿＿＿＿<li>サブコンテンツ</li> ＿＿＿＿＿<li>サブコンテンツ</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿</ol> ＿</nav> ＿<section> ＿＿<h2>コンテンツ２</h2> ＿＿<p>CSS3のbox-sizing: border-box;は、よほどのことがない限り使わない。かっての互換モードを彷彿とさせる仕組みです。</p> ＿</section> ＿<section> ＿＿<h2>コンテンツ２</h2> ＿＿<p>本文はsectionでマークアップします。階層はsectionの階層で示されます。</p> ＿＿<section> ＿＿＿<h3>サブコンテンツ</h3> ＿＿＿<p>以前のHTMLはh1の数字で階層を指定していましたが、HTML5では、sectionの階層で文書のアウトラインを構成しますので、すべてh1で見出しをマークアップしても良い。</p> ＿＿</section> ＿＿<section> ＿＿＿<h3>サブコンテンツ</h3> ＿＿＿<p>sectionは一つだけ見出しを持つと期待されます。</p> ＿＿</section> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿</footer> </body> </html>

質問者

補足 2014/06/16 16:11

ORUKA1951様いつもありがとうございます。早速頂いたソースで色々動きを見てみました。希望している動きについてはanimetionを使用する点以外はある程度同じ動作でしたが、私が抱えている問題はクリアできておりませんでした。（あつかましくて申し訳ないです。）例えば nav{position:fixed;top:0;left:0;height:100%;}にz-indexで最前面に配置します。マウスオーバーでnavをスライドさせたりブラウザの横幅を拡大縮小すると、header部分などのボックスがスライドされませんでした。上記の問題を解決するためにnav部分にstaticとfixedボックスを重ねてみましたが、どうやら最前列が優先されてしまう様で失敗しました。また、どうして文字だけ動いたのか調べてみました。hover時にmargin-left:315pxでボックスごと動かず文字のみ動きました。 p要素などのボックスは動きましたが、外のボックスは動きませんでした。それで下記部分をテストで追加したら、内部ボックスについてはスライドしました。 section p#test{ width: 200px; height: 500px; background-color: #FFFFFF; } <p id="test">CSS3のbox-sizing: border-box;は、よほどのことがない限り使わない。かっての互換モードを彷彿とさせる仕組みです。</p> </section> 絶対位置と絶対位置と相対位置のみではどんな手段を使っても上記仕様は不可能なのかもしれません。しかし絶対位置と（相対位置+相対位置）のように二重に設定すると上記仕様の対応できるかもしれません。スマートではない上、二重にボックスを用意するので複雑になってしまう点はかなり問題な気がします。何か良い解決策があればご教示頂けると大変助かります。【border-boxについて】 border-boxはレイアウトする際にpaddingやmarginなどで動かした分も含めた幅で設定されて配置する際に便利、とお聞きしたので使用してみましたがそうではないのでしょうか？すみません、よく分かってないです(-_-;) 【その他】 [1] nav:hover+section>*,nav:hover+section+section>*,nav:hover+section+section+footer>*{margin-left:315px;} などの『大なり小なり』についてどのような意味はあるのでしょうか？見た感じnav部分をhoverした際、section、2つ目のsection、Footer部分のmarginをleftにする。となっているとイメージしています。しかし『大なり小なり』がどんな意味を持っているのか分かりませんでした。 [2] カラムのレイアウトについて書籍や参考サイトでdivを主に使用していますが、こちらは止めておいた方が良いのでしょうか。 <div id="my_body"> 　<div id="my_header">ヘッダー</div> 　　<div id="my_main"> 　　　<div id="my_navigation">ここにナビゲーション</div> 　　<div id="my_contents">ここにメインコンテンツ</div> 　</div> 　<div id="my_footer">フッター</div> </div> sectionを用いればメイン部分もなんとか要素のみで組めそうです。ただ、どうしても<div id="my_body">のように各カラムを囲う部分は作れませんでした。カラムを囲むより各ボックス毎を配置した方が作りが良いのでしょうか？以上です。お手数おかけしますがご返事頂けると幸いでございます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/16 09:10 回答No.1

　そんなHTML書いてたら、先で右じゃなく左に、いやトップにとデザイン変えたいときHTML書き直さなきゃならない。　HTMLとスタイルシートを分ける最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」ですよ。【ここをよく読んでおく!!必須です。】　当然DIVのclass名は「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」のものですから、MasterColumn、LeftColumu_z2、LeftHeader、RightHeader、RightColumuとはつけないです。　というより、HTML5のようですが、HTML4.01の「「id属性及び class属性と併用することで、文書に構造を付加する」が理解されなくて、HTML5では、header、sextionのように新しい文書構造を示す要素が追加されDIVは原則使わなくなりました。「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」--著者は他に適当な要素がないときの最後の手段としてのみDIVを使用する。　HTML/CSSを上達するために最も大事な部分です。＞２．左カラムにマウスを乗せるとカラムが右に若干スライドするようにしたい。スライド時、右カラムも左カラムが動いた分、スライドします。　これは、しないほうが良いですよ。javascriptでも使用するか、文書構造を本来の構造と離れたものにしないとならなくなります。　なぜなら、この二つが連動すると言う事は、いずれもその要素の構造的に子供でなければならない。しかし目次の子供に本文が入る事は望ましくありません。 ★floatを多用されていますが、floatは記事内のfigure的な要素の周囲に本文を回りこませる意味があります。段組に使用すると肝心の本文内で、本当の意味でfloatやclearを使いたい時に使えなくなります。そしてなによりも、主要でない要素を前に置かなければならなくなる。＞左カラムのheight部分を100％表示して、position:fixedを使って位置固定とスクロールしないメニュー画面を作りたい。　なにを基準に100%なのか、位置固定なのか分かりません。示されたスタイルシートは要素に対してであって「位置固定とスクロールしない」ためのfixedにはなっていません。【参考】　HTMLは、ごく一般的な次の形だとしてます。 ★同じナビゲーションがheader内とsection内にあるのでheader内のものは省きました。 ★これだと文書の改定も楽ですし、デザインも自由になる。スマホ用、印刷用にスタイルシートを切り替えるのも楽ですよね。なによりもスタイルシートも書きやすい。 <body> ＿<header> ＿＿<h1>タイトル</h1> ＿</header> ＿<section> ＿＿<h2>コンテンツ２</h2> ＿＿<p>本文はsectionでマークアップします。階層はsectionの階層で示されます。</p> ＿＿<section> ＿＿＿<h3>サブコンテンツ</h3> ＿＿＿<p>HTML5では、sectionとh1～h6は必ずセットでアウトラインを構成する。</p> ＿＿</section> ＿＿<section> ＿＿＿<h3>サブコンテンツ</h3> ＿＿</section> ＿＿<nav id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li>コンテンツ１</li> ＿＿＿＿<li>コンテンツ２＿＿＿＿＿<ol> ＿＿＿＿＿＿<li>サブコンテンツ</li> ＿＿＿＿＿＿<li>サブコンテンツ</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</nav> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿</footer> </body>

特殊なカラムのデザイン設定について