参考URL
li要素・liタグとは - タグHTML
→タグ毎にインラインorブロック要素か記載あり。
CSS マージンと余白
→margin、border、paddingの記述あり
margin、paddingの初期化:CSS入門
→margin、paddingはブラウザ毎に初期値が異なる。明示的に初期化する方法の説明あり。
【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー
→positionプロパティについて説明が分かりやすい
CSSで要素を横に並べる主な3つのやり方(ブラウザ対応表のおまけつき) - Qiita
→横並び方法の説明あり。ブロック要素なら、floatでOK。インライン要素なら、displayでinline-boxにしちゃう。
HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】 - いつ俺〜いつから俺ができないと錯覚していた?〜
→スタイルシートの記述方法が分かりやすい
2カラムレイアウト作成
少しづつCSSを追加して、効果を見る。
第一弾
ベースはこれ
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <div id="top"></div> <div id="side"></div> <div id="main"></div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-Color: skyblue; } #side { background-Color: aliceblue; } #main { } </style> </html>
表示画面
コメント
真っ白け
div(ブロック要素)の幅指定もない為、背景色の効果もなし
第二弾
top、side、mainに幅を指定する。sideにfloatを付ける
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <div id="top"></div> <div id="side"></div> <div id="main"></div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; } #side { background-color: aliceblue; height: 100%; width: 250px; float: left; } #main { height: 100%; width: 100%; } </style> </html>
表示画面
コメント
ブロック要素に幅・高さを指定したが、sideにfloat: left指定してもmainがうまく表示されない。。。。
第三弾
position指定をする。
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <div id="top"></div> <div id="side"></div> <div id="main"></div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; } #side { background-color: aliceblue; height: 100%; width: 250px; float: left; position: fixed; top: 100px; left: 0px; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; } </style> </html>
表示画面
コメント
それっぽくなる
positionでfixedで指定。fixedの場合は、ウィンドウを基準とした絶対位置で指定する。
floatいらないかも。。。
【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー
第四弾
float取ってみる。
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <div id="top"></div> <div id="side"></div> <div id="main"></div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; } </style> </html>
表示画面
コメント
floatなしでも表示は変わらず。
第五弾
各divボックスに収まりきらないインラインデータを入れた時
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 10); </script> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; } </style> </html>
表示画面
コメント
スクロールバーが出てこない。。。。
overflow-スタイルシートリファレンス
overflow: autoで出るようになるみたい
第六弾
overflow: autoを入れてみる。
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 10); </script> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; overflow: auto; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; overflow: auto; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; overflow: auto; } </style> </html>
表示画面
コメント
topとsideにスクロールバーが付いた。
mainにはつかない。けど上下キーでスクロール効果はあり。
★疑問★
mainとsideでは一番下までスクロールしても全てインラインデータが表示されていない。
93まで。これは今度詳しい人に聞いてみる。
第七弾
タブを付ける。
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 10); </script> <ul id="top_tab"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; overflow: auto; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; overflow: auto; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; overflow: auto; } #top_tab { position: absolute; bottom: 0px; left: 250px; list-style-type: none; } </style> </html>
表示画面
コメント
top_tabはulタグでボックス要素。
positionはabsoluteで指定する。
absoluteの場合、
【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー
では、以下の記載があり。
static以外を指定された親要素を基準とした絶対位置
親要素がstaticの場合にabsoluteを指定するとfixedと同じ挙動になりますが、まず使うことはありませんので、親要素には必ずrelativeを指定することになります。
親要素は、top(div)でpositionはfixed。
親要素のbottom: 0はtopとside・mainの境目
親要素のleft: 250は画面左から右に250pxいったところ。
リストの横並びは、次のステップでやる。
postionにabsolute以外を指定した場合の動作を見てみる。
第八段弾
top_tabをrelativeで指定した場合
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 10); </script> <ul id="top_tab"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; overflow: auto; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; overflow: auto; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; overflow: auto; } #top_tab { position: relative; bottom: 0px; left: 250px; list-style-type: none; } </style> </html>
表示画面
コメント
変な事になった。これはどういう動きだろう。
relativeの場合は、以下URLによると
【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー
通常の位置を基準とした相対位置
staticを指定した場合は、通常の位置(top、left等で詳細位置を指定できない)
relativeはstatic指定時の位置からtop、left等で相対位置を指定できる。
この「通常の位置」とは?表示画面のulタグの表示位置を確認すると、、、、
開始位置を縦でみると、top9の次の行から表示されている
開始位置を横でみると、left: 250の位置から表示されている
上記より、縦の開始位置については、、、、、
親要素(top)の内、前に定義されているデータ(pタグ)の出力された後の位置がbottom: 0
→topの一番下(height: 100)ではない。
のように見える。
ためしに、bottomをtopに変更してみるとどうなるか??
第九弾
bottomをtopに変更してみる
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 10); </script> <ul id="top_tab"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; overflow: auto; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; overflow: auto; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; overflow: auto; } #top_tab { position: relative; top: 0px; left: 250px; list-style-type: none; } </style> </html>
表示画面
コメント
変わらない。。。。
この「通常の開始位置」ってのがよく分からない。。。。
positionプロパティで位置を調節(1) | CSS中級編
上記URLのサンプルがすっごい分かりやすい!ありがとうございます!!!
スクロールされると分かりづらい。またbottom、topの指定値が0だと違いが分かりづらい。
第十弾
pタグは1行だけにして、top_tabのpositonは以下3パターンで試す。
①position: relative;
②position: relative; top: 10px;*/
③position: relative; bottom: 10px;*/
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 1); </script> <ul id="top_tab"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; overflow: auto; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; overflow: auto; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; overflow: auto; } #top_tab { position: relative; /* position: relative; top: 10px;*/ /* position: relative; bottom: 10px;*/ list-style-type: none; border: 0.5px solid; } </style> </html>
表示画面
①の場合(top/bottom指定なし)
②の場合(top10px指定あり)
③の場合(bottom10px指定あり)
コメント
relativeでtop・bottom指定しない場合=staticと同じ。
→基準位置は、前定義されたタグの直後(今回の場合、pタグ)が開始位置
この開始位置を基準にして、、、
top:10pxの場合、開始位置を10px分下に下げる。
bottom:10pxの場合、開始位置を10px分上に上げる。(終了位置を10px上げる?)
上記より以下3パターンは同じ表示になる。
top: 0px
bottom: 0px
top/bottom定義なし
absoluteの場合も同様に見てみる。
第十弾
pタグは1行だけにして、top_tabのpositonは以下3パターンで試す。
①position: absolute; left: 250px;
②position: absolute; top: 10px; left: 250px;
③position: absolute; bottom: 10px; left: 250px;
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 1); </script> <ul id="top_tab"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; overflow: auto; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; overflow: auto; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; overflow: auto; } #top_tab { position: absolute; left: 250px; /* position: absolute; top: 0px; left: 250px; */ /* position: absolute; bottom: 0px; left: 250px; */ list-style-type: none; border: 0.5px solid; } </style> </html>
表示画面
①の場合(top/bottom指定なし)
②の場合(top0px指定あり)
③の場合(bottom0px指定あり)
コメント
基準位置の考え方が、absoluteとrelativeで全然違う。
absoluteの方が直感的な感じがする。
第十一弾
top_tabはabsolute指定にする
ulタグをタブっぽくする
ソース
<!-- コメント--> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="pikesaku"> <meta name="keywords" content="python study"> <meta name="description" content="pike web"> <meta name="robots" content="all"> <meta http-equiv="content-language" content="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>pike web site</title> </head> <body> <script type="text/javascript"> function op_il_data(part, num) { for (var i = 0; i < num; i++) { document.write("<p>" + part + String(i) +"</p>"); } } </script> <div id="top"> <script type="text/javascript"> op_il_data("top", 1); </script> <ul id="top_tab"> <li><a href="#page1">Page 1</a></li> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> </ul> </div> <div id="side"> <script type="text/javascript"> op_il_data("side", 100); </script> </div> <div id="main"> <script type="text/javascript"> op_il_data("main", 100); </script> </div> </body> <style> * { margin: 0; padding: 0; border: 0px none; } #top { background-color: skyblue; height: 100px; width: 100%; position: fixed; top: 0px; left: 0px; } #side { background-color: aliceblue; height: 100%; width: 250px; position: fixed; top: 100px; left: 0px; overflow: auto; } #main { height: 100%; width: 100%; position: fixed; top: 100px; left: 250px; overflow: auto; } #top_tab { position: absolute; bottom: 0px; left: 250px; list-style-type: none; height: auto; width: auto; } #top_tab li { float: left; height: auto; width: auto; } #top_tab li a { display: block; height: auto; width: 150px; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: blue; padding: 5px; margin: 1px; } </style> </html>
表示画面
コメント
タグはリンクさせるため、aタグを利用。aタグはインライン要素
タブの範囲をリンク範囲にするため、aタグをdisplayプロパティでblockに変更する。
あとタブっぽく見せるため、微調整。
第十二弾
今日は疲れた。。。。。。ひとまずここまで。
最終的にはタブをクリックするとsideとmainが変わるページにしたい。
結局positionプロパティの動作把握で1日終わってしまった。。。。
PythonでWebアプリ作るため勉強が、Pythonの前のHTML/CSS/JavaScript勉強の範囲から抜け出せない。。。。
まあ、ぼちぼち頑張ろう。次くらいから、javaScriptの勉強に入れそう。