KANETAKEMARU

亜留間二郎ウエブ覚え書き

覚え書きTop

ウエブ修行中の亜留間二郎の覚え書きです。

単に自分でやったことを忘れないために書いているだけのページです。ほかの人が見ても役に立たないかも知れません。

でも、いくらか体裁をととのえてアップすれば自分のスキルアップにつながるし、ひょっとしたら参考にしてくれる人もいるかもしれないし・・・。

当サイトのご利用について

説明はとてもわかりにくいと思います。というか説明はほとんどありません。自分のための覚え書きなので。

書いてある内容が適切かどうかについては自信がありません。初心者なので。

このサイトに書いてあるとおりやってみて、何か経済的な損失を被ったり、ウエブ制作者として人としての信頼を失うようなことがあっても当方は一切の責任は負いませんので、どうしても利用したい方は自己責任でお願いいたします。

header

body外側に余白?

html,body,header,footerに対し、
box-sizing: border-box; margin: 0; padding: 0;を指定。

header

最上部の帯状のところ

親(外)子(内)の二重のdivで作成。
親divでもwidth(この場合100%)を指定しないと子divのwidth: 80%;やmargin: 0 auto;が効かないので注意が必要。

親(外)子(内)両方のwidthが決まらないとmargin: 0 auto;で子要素の中央寄せができない。

aside

右asideにiframeでナビ

グローバルナビなどのリンクをphpで読み込んでみたこともあるが、サーバ環境でないと動かないため、今回はリンクナビのhtmlを別に作成しiframeで読み込んでみた。
読み込む方のhtml
iframe seamless src="sample7aside_link.html" frameborder=0 scrolling=”no”のすぐ後ろに閉じタグ/iframeをつけた。
読み込む方のcss
aside iframe に width: 100%; height: 25em;を記述。(高さが読み込むhtmlより高くないと右スクロールバー出現。jsで解消する手段あり)
読み込まれるhtml
リンクには忘れずにtarget="_top"をつける。a href="sample7.html" target="_top"
読み込まれるcss
htmlに対し、overflow-y: hidden;を記述するとクロームでのスクロールバーが消えるそうだが・・・。

headerやfooter内で・・・

footerで、inlineの画像やtextを中央寄せなら・・・
親要素にtext-align: center;

inlineの画像やtextを左右に分けたい・・・
headerデフォルトでは左による。右に寄せたい要素、今回はfloat:rightで右寄せ。

上下の中央寄せ
インライン要素は下のbaselineでそろうのが初期値。
画像と文字にcssで、vertical-align: middle;記述することで上下の中央でそろう。