[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>CSSハック：clearfix
CSSハック：clearfix
CSSによるレイアウトをおこなった場合、floatを利用することはスタンダードな手段だ。ところが親コンテナの中で子コンテナをfloatしてやると親コンテナの高さがおかしなことになる。
サンプル
id="clearFix"
id="cfLeft"
clearfixのテスト。左側に寄せるコンテンツ
id="cfRight"
clearfixのテスト。右側に寄せるコンテンツ
親コンテナに背景がある場合、背景が切れることになりその対策として下記のような.clearクラスをbrなどにくっつけてfloat解除をしていた。
サンプル
CSS
- .clear {
- clear: both;
- }
HTML
- <div id="clearFix">
- <p>id="clearFix"</p>
- <div id="cfLeft">
- <p>float: left;</p>
- <p>clearfixのテスト。左側に寄せるコンテンツ</p>
- </div>
- <div id="cfRight">
- <p>float: right;</p>
- <p>clearfixのテスト。右側に寄せるコンテンツ</p>
- </div>
- <br class="clear" />
- </div>
実行結果
id="clearFix"
float: left;
clearfixのテスト。左側に寄せるコンテンツ
float: right;
clearfixのテスト。右側に寄せるコンテンツ
floatがクリアされ、背景が表示されるので結果としては問題ないが、(x)HTMLに余分なソースを記述することになりちょっと気持ちが悪い。
そこでclearfixというCSSハックを利用する。
clearfixサンプルソース
CSS
- clearFix {
- zoom:1;/*for IE 5.5-7*/
- }
- clearFix:after {/*for modern browser*/
- content:".";
- display: block;
- height:0px;
- clear:both;
- visibility:hidden;
- }
clearfix実行結果
id="clearFix"
float: left;
clearfixのテスト。左側に寄せるコンテンツ
float: right;
clearfixのテスト。右側に寄せるコンテンツ
上記以外にも書き方は多数ある模様。
cleafix参考サイト
| 投稿日 | 2007年10月29日 21:39 |
|---|---|
| カテゴリ | HTML/CSS |
| タグ | CSSハック |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1125 |
コメント