プロが教える店舗＆オフィスのセキュリティ対策術

少ないコンテンツの場合のみのフッター下部固定について。

解決済

  • 質問者：huskyyy
  • 質問日時：
  • 回答数：5件

質問させていただきます。

http://mydesign.mods.jp/about.html

上記ページなのですが、
コンテンツが少ないページに対して、CSSでフッターを下部固定させるようにしたのですが、

コンテンツの下部20pxが表示されず、常にスクロールバーが出てしまいます。

最下部まで（残り20px分）スクロールさせたら今度は最上部20pxが表示されなくなります。

コンテンツが少ないページを全て表示させスクロールバーを出さないようにしたいです。

ご教授よろしくお願いいたします。

質問者からの補足コメント

  • ここまで丁寧に指導していただけるとは。。目からウロコの内容でした。非常に感謝しております。ありがとうございます。

    当方CSSに関しては1ヶ月前から勉強しだした初心者なので、まだ全てを理解することはできませんが、サイトを手直ししながら少しずつ理解していきたいと思います。

    つきまして。もう少し理解の幅を拡げたいので、下記別ページの添削もお願いできませんか？
    http://mydesign.mods.jp/index.html
    http://mydesign.mods.jp/trip_thailand.html

    お手すきの際で結構です。何卒よろしくお願いいたします。

    No.3の回答に寄せられた補足コメントです。 補足日時：2015/12/13 21:16
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

質問内容が理解できないのですが、


　想像するに、ページのコンテントが少ない時はウィンドウの下端に、コンテントが多い時は下に伸びるということじゃないかと。
htmlやbodyのルート要素は背景やサイズで特殊な扱いを受けますから、全体を囲む要素を用意したほうが良いでしょう。
　良く書けたHTML/CSSですが、肝心なところで、ずいぶんとおかしな間違いがあるのでそれを修正してサンプル作ってみました。

重要な点から
★ HTML5ではDIVは原則使いません。
『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.( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )』
　「他に適切な要素がない時の最後の手段としてdiv要素を使用することが強く奨励されます。div要素でなくより適切な要素を使用することは、読者のた​​めにはより良いアクセシビリティを、作者には容易な保守性につながります。」
★divを使う場合も、そのidやclass名は文書構造を示すものにします。
　HTML4.01(1999年勧告)以来
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　これは、HTML5で新しい要素が追加された理由でもありますし、いまだにこのルールは生きています。
　新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

　<div id="container">　　　　　<article>でしょう。
　<div id="header_wrap">　　　　不要です。
　<div id="head_center">　　　　不要です。
head_icon"　clearfix　current　content_wrap　ttl_aria　center　txt_aria　discript mb25　bold
　・・・・その意味では、これらはすべて失格!!!デザインを示すものではなく、文書構造を示すものにしましょう。

【サンプル】
　こんなにシンプルでメンテナンスしやすい。SEO的にも完ぺきなものになります。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　で検証済みHTML5
　★タブは＿に置換してあるので戻すこと。
　★http:// はhttp：//に置換してあるので戻す。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ABOUT｜MY DESIGN</title>
<link rel="shortcut icon" href="./images/favicon.ico">
<style media="screen">
<!--
/* この部分は外部スタイルーシートにするのが通常ですが、あえてここに書きます。
　　次の回答で */
-->
</style>
<style media="screen">
<!--
body>article>header nav ul li a[href="/about.html"]{
＿color:red;
＿/* カレントの場合のプレゼンテーションはここに書く */
}
-->
</style>
</head>
<body>
＿<article>
＿<header>
＿＿<h1><a href="/index.html">MY DESIGN</a></h1>
＿＿<nav>
＿＿＿<ul><!-- ナビゲーションリンクはルートからのパスにしておくと℃の階層にも移動できる -->
＿＿＿＿<li><a href="/index.html">TOP</a></li>
＿＿＿＿<li><a href="/trip.html">TRIP</a></li>
＿＿＿＿<li><a href="/works.html">WORKS</a></li>
＿＿＿＿<li><a href="/about.html">ABOUT</a></li>
＿＿＿＿<li><a href="/contact.html">CONTACT</a></li>
＿＿＿</ul>
＿＿</nav>
＿＿<aside><!-- 本文と関係ないのでaside -->
＿＿＿<ul>
＿＿＿＿<li>
＿＿＿＿＿<a href="https://www.facebook.com/masaki.yamagata.3" target="_blank"><img alt="facebook" src="http：//mydesign.mods.jp/images/icon_fb.png"></a>
＿＿＿＿</li>
＿＿＿＿<li>
＿＿＿＿＿<a href="http：//instagram.com/husky0502/" target="_blank"><img alt="instagram" src="http：//mydesign.mods.jp/images/icon_insta.png"></a>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</aside>
＿</header>
＿<section><!-- これはsection -->
＿＿<h2>ABOUT</h2>
＿＿<section id="Self-introduction"><!-- HTM5では、sectionの階層で構造を示す -->
＿＿＿<h3>当サイトについて。<br>また当サイト制作者のプロフィール。</h3><!-- sectionひとつにつき必ずheadingひとつ -->
＿＿＿<p>
＿＿＿＿当サイトは、制作者の趣味の一つである「旅」の記録を発表する場として、またそれと同時に、写真を見てそれぞれの国の良さを少しでも感じていただき、そして旅へ興味を持つきっかけになればと思い、制作しました。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿また旅の記録をメインコンテンツとして、他ページではデザイナーである当方の個人もしくは仕事上でのデザインを一部掲載しております。
＿＿＿</p>
＿＿</section>
＿＿<section>
＿＿＿<h3>PROFILE</h3>
＿＿＿<dl id="profile"><!-- ここは内容的に定義リスト -->
＿＿＿＿<dt>誰それだれべぇ</dt>
＿＿＿＿<dd>WEBデザイナー / グラフィックデザイナー<dd>
＿＿＿＿<dd>
＿＿＿＿＿<ul><!-- 内容でない■などは入れてはならない。検索エンジンやスクリーンリーダーのことも考える-->
＿＿＿＿＿＿<li>1980：大阪府生まれ</li>
＿＿＿＿＿＿<li>2006：某デザイン系専門学校卒業。</li>
＿＿＿＿＿＿<li>卒業後、グラフィックデザイナーとして、プロダクションなどで数年勤める。</li>
＿＿＿＿＿＿<li>20代後半から海外の空気にハマり、東南アジア、中東などを転々と旅する。</li>
＿＿＿＿＿＿<li>30代に入り、かねてから興味のあったWEBの世界へ。</li>
＿＿＿＿＿</ul>
＿＿＿＿</dd>
＿＿＿</dl>
＿＿</section>
＿</section>
＿<footer>
＿＿<p><!-- 一つの段落は切らない -->
＿＿＿当サイト内に掲載されているすべての文章・画像・写真・デザインの無断転載、転用は日本の著作権法によって禁じられています。</p>
＿＿</p>
＿＿<ul>
＿＿＿<li><a href="./index.html">TOP</a></li>
＿＿＿<li><a href="./trip.html">TRIP</a></li>
＿＿＿<li><a href="./works.html">WORKS</a></li>
＿＿＿<li><a href="./about.html">ABOUT</a></li>
＿＿＿<li><a href="./contact.html">CONTACT</a></li>
＿＿</ul>
＿＿<address>Copyright(C) 2015 MY DESIGN All Right Reserved.</address>
＿</footer>
＿</article>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.5

こんにちは。


まだ解決まではしていないようなので、回答させていただきます。
http://mydesign.mods.jp/about.html
拝見しました。
一応上記サイトソースを見て、同じ構造でHTMLを組みましたので、このまま下記のCSSを追加すればフッター固定できると思います。

【HTML】質問者様のサイトと同じ構造です

<div id="container">

<header> ヘッダーの内容</header>

<div id="contentWrap">コンテンツの内容</div>

<footer>フッターの内容</footer>

</div>

【CSS】
html,body{height: 100%;}

#container{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#contentWrap{
padding-bottom: 170px;
/*適宜。下部固定のフッター分の高さ確保することで、ブラウザの高さを低くした時に重なりを回避するため*/
}
footer{
position: absolute;
bottom: 0;
height: 170px;/*適宜。フッターの高さを記述してください*/
}


この方法って適当にネットで「フッター固定　CSS」とか検索でめちゃくちゃたくさん出てくるので、
そういう記事もご自身で読んでいくと、ここで質問するより納得できるのではないかなと思います。
ここの回答より、記事のほうが詳細に書いてくれていますしね。

頑張ってください。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： ORUKA1951
  • 回答日時：

どのページであれ基本的なHTMLとスタイルシートの書き方は同じです。


だから、文書構造とプレゼンテーションは分離しなければならない。
例えば、
http://mydesign.mods.jp/trip_syria.html
は、文書構造的には単純なリストとして、画像をリストアップしておいて、dispaly:inline-block;ないしfloatで並べればよい。右サイドのメニューは、section内にあるべきナビゲーションリスト--目次ですから、それはabsoluteでsectionの右に配置すればよい。そのとき、先の画像リストでは右側をその分paddinbで開ければよい。

たとえば、
class="nailthumb-container square-thumb thumb mbmr10 float_left"
こんなclass名なんてつけたらだめです。全く書かなくてよいし、書いてもせいぜい"Photo"と、あとあとメンテナンスするときのために、写真だとわかればよい。float_leftとしてあるけど、異なるデザイン--block--にしたいときはどうするの??
「id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」はdivに限りません。

　また、
<!-------- 写真2段目 -------->
　こんなことしてるけど、将来写真がなくなったり増えたらどうするの？
それよりは、
CSS 画像をたくさん並べたい時の方法- Webデザイン・CSS | 教えて！goo( https://oshiete.goo.ne.jp/qa/9126616.html )
で示したサンプルのようにウィンドウ幅で並べ替えたほうが良いですね。

そうすると
<li>
　<a href="./images/trip_photo/thailand/img04.jpg"><img width="128" height="128" alt="サムセン通り界隈 / バンコク" src="./images/trip_photo/thailand/img04.jpg"></a>
</li>
の単純なリストになる。

　このほうがよほど楽です。
a要素にtitle書いてもよいが、画像のaltも多くのブラウザでチップとして表示されるのでなくてもよい。★ただし画像のaltの値は、内容の追加としての利用はできない。なぜなら画像要素には内容がないから・・
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

スタイルシート部分です。



★タブは＿に、URLの:// は、：// ｉ置換してあるので戻す。
★すべてのプロパティをリセットするのは感心しません。
　可能な限りデフォルトのスタイルは活用します。

★タブレットやスマホでも横スクロールなしで利用できるはずです。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

<style media="screen">
<!--
html,body{
＿padding:0;margin:0;font-size:14px;height:100%;
}
body>article{
＿width:100%;min-height:100%;
＿position:relative;
＿width:100%;max-width:1000px;margin:0 auto;
}
body>article>section{
＿width:80%;
＿padding-bottom:80px;
}
h1{
＿height:100px;width:142px;
＿margin:20px auto;
＿overflow:hidden;text-indent:100em;white-space:pre;
＿background:url(http：//mydesign.mods.jp/images/header_logo.png)
}
p{
＿margin:0;line-height:1.6em;text-indent:1em;
}
header nav{
＿width:100%;
＿background-color:black;
}
header nav ul{
＿list-style-type:none;
＿text-align:center;
＿font: 13px/3.7em "Ubuntu","century gothic",sans-serif;
＿/* 総称ファミリ名はキーワードなので、引用符で括ってはいけません。*/
＿line-height: 48px;height:48px;
＿letter-spacing: 0.15em;
＿margin: 0;padding: 0;
＿position:relative;
}
header nav ul li{
＿display:inline-block;
＿width:18%;
}
header nav ul li a{
＿display:block;width:100%;height:100%;
＿color:white;
＿text-decoration:none;
}
header nav ul li a:hover{
＿color:orange;
＿background-color:rgb(30,30,80);
}
header aside{
＿position:absolute;
＿right:20px;top:20px;
}
header aside ul{
}
header aside ul li{
＿list-style-type:none;
＿width:20px;height:20px;
＿overflow:hidden;
＿display:inline-block;
}
section h2{
＿font-size:79px;
＿font-family:"Oswald","century gothic",sans-serif;
＿letter-spacing: -0.02em;
＿margin:0;
＿text-align:center;
}
section h2:first-letter{
＿color:rgb(255,200,0);
}
section#Self-introduction h3{
＿width:16em;
＿margin:5px auto;
＿text-align:center;
＿font-weight:normal;
＿font-size:14px;
＿white-space:pre;
＿padding-bottom:14px;
＿background: url("http：//mydesign.mods.jp/images/stroke.gif") repeat-x bottom;
}
#profile dd ul li{list-style:none;
＿margin:0.4em 0;
＿padding:0;
}
#profile dd ul li+li+li:before{
＿content:"■ ";
}
body>article>footer{
＿position:absolute;
＿bottom:0;
＿left:auto;
＿background-color:rgb(220,220,220);
}
body>article>footer p{
＿width:50%;max-width:1000px;margin:0 auto;
＿padding-right:50%;
}
footer ul{
＿position:absolute;
＿right:0;top:5px;
＿width:50%;
＿text-align:center;
}
footer ul li{
＿list-style:none;
＿display:inline-block;
}
footer ul li+li:before{
＿content:" | ";
}
footer ul li a{
＿text-decoration:none;
＿color:gray;
}
footer address{
＿text-align:right;
}
-->
</style>
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

facebookのURLだけ修正



【サンプル】
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　で検証済みHTML5
　★タブは＿に置換してあるので戻すこと。
　★http://、https:// は、それぞれ　http：//、http：// に置換してあるので戻す。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ABOUT｜MY DESIGN</title>
<link rel="shortcut icon" href="./images/favicon.ico">
<style media="screen">
<!--
/* この部分は外部スタイルーシートにするのが通常ですが、あえてここに書きます。
　　次の回答で */
-->
</style>
<style media="screen">
<!--
body>article>header nav ul li a[href="/about.html"]{
＿color:red;
＿/* カレントの場合のプレゼンテーションはここに書く */
}
-->
</style>
</head>
<body>
＿<article>
＿<header>
＿＿<h1><a href="/index.html">MY DESIGN</a></h1>
＿＿<nav>
＿＿＿<ul><!-- ナビゲーションリンクはルートからのパスにしておくと℃の階層にも移動できる -->
＿＿＿＿<li><a href="/index.html">TOP</a></li>
＿＿＿＿<li><a href="/trip.html">TRIP</a></li>
＿＿＿＿<li><a href="/works.html">WORKS</a></li>
＿＿＿＿<li><a href="/about.html">ABOUT</a></li>
＿＿＿＿<li><a href="/contact.html">CONTACT</a></li>
＿＿＿</ul>
＿＿</nav>
＿＿<aside><!-- 本文と関係ないのでaside -->
＿＿＿<ul>
＿＿＿＿<li>
＿＿＿＿＿<a href="https：//www.facebook.com/masaki.yamagata.3" target="_blank"><img alt="facebook" src="http：//mydesign.mods.jp/images/icon_fb.png"></a>
＿＿＿＿</li>
＿＿＿＿<li>
＿＿＿＿＿<a href="http：//instagram.com/husky0502/" target="_blank"><img alt="instagram" src="http：//mydesign.mods.jp/images/icon_insta.png"></a>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</aside>
＿</header>
＿<section><!-- これはsection -->
＿＿<h2>ABOUT</h2>
＿＿<section id="Self-introduction"><!-- HTM5では、sectionの階層で構造を示す -->
＿＿＿<h3>当サイトについて。<br>また当サイト制作者のプロフィール。</h3><!-- sectionひとつにつき必ずheadingひとつ -->
＿＿＿<p>
＿＿＿＿当サイトは、制作者の趣味の一つである「旅」の記録を発表する場として、またそれと同時に、写真を見てそれぞれの国の良さを少しでも感じていただき、そして旅へ興味を持つきっかけになればと思い、制作しました。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿また旅の記録をメインコンテンツとして、他ページではデザイナーである当方の個人もしくは仕事上でのデザインを一部掲載しております。
＿＿＿</p>
＿＿</section>
＿＿<section>
＿＿＿<h3>PROFILE</h3>
＿＿＿<dl id="profile"><!-- ここは内容的に定義リスト -->
＿＿＿＿<dt>誰それだれべぇ</dt>
＿＿＿＿<dd>WEBデザイナー / グラフィックデザイナー<dd>
＿＿＿＿<dd>
＿＿＿＿＿<ul><!-- 内容でない■などは入れてはならない。検索エンジンやスクリーンリーダーのことも考える-->
＿＿＿＿＿＿<li>1980：大阪府生まれ</li>
＿＿＿＿＿＿<li>2006：某デザイン系専門学校卒業。</li>
＿＿＿＿＿＿<li>卒業後、グラフィックデザイナーとして、プロダクションなどで数年勤める。</li>
＿＿＿＿＿＿<li>20代後半から海外の空気にハマり、東南アジア、中東などを転々と旅する。</li>
＿＿＿＿＿＿<li>30代に入り、かねてから興味のあったWEBの世界へ。</li>
＿＿＿＿＿</ul>
＿＿＿＿</dd>
＿＿＿</dl>
＿＿</section>
＿</section>
＿<footer>
＿＿<p><!-- 一つの段落は切らない -->
＿＿＿当サイト内に掲載されているすべての文章・画像・写真・デザインの無断転載、転用は日本の著作権法によって禁じられています。</p>
＿＿</p>
＿＿<ul>
＿＿＿<li><a href="./index.html">TOP</a></li>
＿＿＿<li><a href="./trip.html">TRIP</a></li>
＿＿＿<li><a href="./works.html">WORKS</a></li>
＿＿＿<li><a href="./about.html">ABOUT</a></li>
＿＿＿<li><a href="./contact.html">CONTACT</a></li>
＿＿</ul>
＿＿<address>Copyright(C) 2015 MY DESIGN All Right Reserved.</address>
＿</footer>
＿</article>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報