目次 対象問題 課題点 解決策 補足 対象問題 下記条件を同時に満たす表を作成する 固定幅の表の一番最後の列だけ変動幅にする ヘッダは固定でボディ部だけスクロールする 課題点 ヘッダ固定でスクロールするには thead, tbody タグにdisplay: blockまたはdisplay: inline-blockを設定する必要がある。 変動幅を実現できない テーブルをブロック要素にすると、変動幅のセルが中の要素に合わせて縮むのでレイアウトが崩れてしまう。 解決策 テーブル部品をflexbox化する ※下記のCodePenをResultだけ表示させること See the Pen flexbox_table by T.T (@tkrtmy1031) on CodePen. flexbox.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="./css/flexbox.css" /> <link rel="stylesheet" type="text/css" href="./css/view.css" /> <title>flexbox</title> </head> <body> <table> <thead> <tr> <th class="seq">No</th> <th class="fixable">固定幅列</th> <th class="flexible">変動幅列</th> </tr> </thead> <tbody> <tr> <td class="seq">1</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">2</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">3</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">4</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">5</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> </tbody> </table> </body> </html> flexbox.css /* テーブル制御用CSS */ /* 固定＋変動幅混在レイアウト */ /* 1. table部品をflexbox化 */ thead, tbody, tr, th, td { display: flex; } /* 2. セルの折り返し */ thead, tbody, tr { flex-direction: row; flex-wrap: wrap; } /* 3. 各行をテーブル幅いっぱいに整列 */ tr { width: 100%; } /* 4. 列（固定幅） */ .seq { width: 50px; } .fixable { width: 400px; } /* 5. 列（変動幅） */ .flexible { flex: 1; } /* スクロール（ヘッダ固定） */ /* 6. スクロール表示 */ tbody { height: 150px; overflow-y: scroll; } 補足 対象問題の条件を同時に満たさなくていいなら、下記の方法で作成できる。 固定幅の表の一番最後の列だけ変動幅にする 変動幅にしたい列のwidthを設定しない See the Pen Flexible Table by T.T (@tkrtmy1031) on CodePen. ヘッダは固定でボディ部だけスクロールする テーブル部品をブロック要素化する（正確にはinline-block） See the Pen Body Scroll by T.T (@tkrtmy1031) on CodePen. ※とはいえ、全く同一の部品を作るのは難しい。用途と工数に応じて的確に使い分けること。
下記条件を同時に満たす表を作成する
thead
tbody
display: block
display: inline-block
テーブル部品をflexbox化する
※下記のCodePenをResultだけ表示させること
See the Pen flexbox_table by T.T (@tkrtmy1031) on CodePen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="./css/flexbox.css" /> <link rel="stylesheet" type="text/css" href="./css/view.css" /> <title>flexbox</title> </head> <body> <table> <thead> <tr> <th class="seq">No</th> <th class="fixable">固定幅列</th> <th class="flexible">変動幅列</th> </tr> </thead> <tbody> <tr> <td class="seq">1</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">2</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">3</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">4</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> <tr> <td class="seq">5</td> <td class="fixable">400px</td> <td class="flexible">テーブル幅の余り</td> </tr> </tbody> </table> </body> </html>
/* テーブル制御用CSS */ /* 固定＋変動幅混在レイアウト */ /* 1. table部品をflexbox化 */ thead, tbody, tr, th, td { display: flex; } /* 2. セルの折り返し */ thead, tbody, tr { flex-direction: row; flex-wrap: wrap; } /* 3. 各行をテーブル幅いっぱいに整列 */ tr { width: 100%; } /* 4. 列（固定幅） */ .seq { width: 50px; } .fixable { width: 400px; } /* 5. 列（変動幅） */ .flexible { flex: 1; } /* スクロール（ヘッダ固定） */ /* 6. スクロール表示 */ tbody { height: 150px; overflow-y: scroll; }
対象問題の条件を同時に満たさなくていいなら、下記の方法で作成できる。
width
See the Pen Flexible Table by T.T (@tkrtmy1031) on CodePen.
See the Pen Body Scroll by T.T (@tkrtmy1031) on CodePen.
※とはいえ、全く同一の部品を作るのは難しい。用途と工数に応じて的確に使い分けること。
Apacheのデフォルトページのアレをコマンド一発で作成します。 index.html <html><body><h1>It works!</h1></body></html> $ echo '<html><body><h1>It works!</h1></body></html>' > index.html 適当なHTMLファイルが欲しいときなんかに使えます。
Apacheのデフォルトページのアレをコマンド一発で作成します。
<html><body><h1>It works!</h1></body></html>
$ echo '<html><body><h1>It works!</h1></body></html>' > index.html
適当なHTMLファイルが欲しいときなんかに使えます。
はじめに 「普段は画面の横幅いっぱいに表示されてほしいけど、ブラウザの拡大率を操作したら拡大はされてほしい」を出来るだけ簡単に（雑に）実現する（ブラウザ依存、PC以外の動作は見ていません） 背景 普通は、 要素のwidthを100%にする Viewportで調整する1 で、解決すると思いますが、 例えば、対象の要素を直接触れないとか、画面ないの一部の要素だけに適用したいとかで使えない想定。 方針 transformでどんなサイズでも合わせてしまえばいいじゃない 結果 CSSだけで実現できないかと思ったが、一旦、断念してJavascriptを利用。 （Javascriptを絡めてしまうと如何様にもやり方はあると思うが） スクロールバーに対応してない ほかのWidth:100%のものと横幅が合わなくなる あたりは対応していない。 ※Windowにfitするように試してるのでCodePenだと確認し辛い。 See the Pen Element Window Fit Test by minilabo (@minilabo) on CodePen. 試したこと CSSだけで実現 最初はCSSだけで実現できないかと試したが、scale + calcを上手く扱えず、時間がかかりそうだったので断念 example.css /* 計算結果の単位のせいか適用されない */ .ng { transform: scale(calc(100vw/2)) } /* これだと動く */ .ok { transform: scale(calc(100/2)) } 諦めてJavascript使って動的に適用する Javascriptで大きさを合わせるだけだと拡大率などに関わらず、Windowに合うだけなので、そのあたりの情報を調査する。 拡大しているかの判定 innerWidthが表示領域、outerWidthがwindowの大きさを表す。 ブラウザの機能で拡大するとinnerWidthが小さくなるので、outerWidthに比べてinnerWidthが小さい場合、拡大されている。 main.js // スクロールバーなどが含まれる為、このまま計算すると少しずれる（が、雑に丸める） const zoom = Math.round(window.outerWidth / window.innerWidth); transformでサイズを変更しても親の要素のサイズに反映されない element.getBoundingClientRect()で高さを取得して、親要素に適用（単純にelement.offsetHeightだと、transform前の大きさがとれる） この関数はとても便利だが、環境によってはダメかも？（参考: https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect） main.js // tramsformの適用後の高さを取得して、親要素に適用してスペースを確保（今回は高さのみ） parent.style.height = element.getBoundingClientRect().height; Viewportで初期の拡大率を1以下にすると問題があるよという記事を見たので参考に > もう逃げない。HTMLのviewportをちゃんと理解する ↩
「普段は画面の横幅いっぱいに表示されてほしいけど、ブラウザの拡大率を操作したら拡大はされてほしい」を出来るだけ簡単に（雑に）実現する（ブラウザ依存、PC以外の動作は見ていません）
普通は、
で、解決すると思いますが、 例えば、対象の要素を直接触れないとか、画面ないの一部の要素だけに適用したいとかで使えない想定。
transformでどんなサイズでも合わせてしまえばいいじゃない
CSSだけで実現できないかと思ったが、一旦、断念してJavascriptを利用。 （Javascriptを絡めてしまうと如何様にもやり方はあると思うが）
あたりは対応していない。
※Windowにfitするように試してるのでCodePenだと確認し辛い。
See the Pen Element Window Fit Test by minilabo (@minilabo) on CodePen.
最初はCSSだけで実現できないかと試したが、scale + calcを上手く扱えず、時間がかかりそうだったので断念
/* 計算結果の単位のせいか適用されない */ .ng { transform: scale(calc(100vw/2)) } /* これだと動く */ .ok { transform: scale(calc(100/2)) }
Javascriptで大きさを合わせるだけだと拡大率などに関わらず、Windowに合うだけなので、そのあたりの情報を調査する。
// スクロールバーなどが含まれる為、このまま計算すると少しずれる（が、雑に丸める） const zoom = Math.round(window.outerWidth / window.innerWidth);
element.getBoundingClientRect()
element.offsetHeight
// tramsformの適用後の高さを取得して、親要素に適用してスペースを確保（今回は高さのみ） parent.style.height = element.getBoundingClientRect().height;
Viewportで初期の拡大率を1以下にすると問題があるよという記事を見たので参考に > もう逃げない。HTMLのviewportをちゃんと理解する ↩
１ヶ月くらい、HTMLの書籍を読んで、一通り目を目を通した。 (といっても、まだ、理解できていないが...) タイトルの通り、ナビゲーションバーをグリッドレイアウトでやってみた。 レイアウト ソース1 最初に書いたソースは下記の通り。 grid_practice1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>グリッドレイアウト 練習</title> <link rel="stylesheet" href="base.css"> </head> <body> <header> <nav id="nav_bar"> <ul> <li><a href="#">ナビ1</a></li> <li><a href="#">ナビ2</a></li> <li><a href="#">ナビ3</a></li> <li><a href="#">ナビ4</a></li> <li><a href="#">ナビ5</a></li> <li><a href="#">ナビ6</a></li> </ul> </nav> </header> </body> </html> base.css body { width: 600px; margin-left: auto; margin-right: auto; } /* ヘッダー */ header { text-align: center; } #nav_bar { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; margin: 0; padding: 0; } #nav_bar li { list-style: none; margin: 0; padding: 0; border: solid 1px; background: #f3f3f3; } #nav_bar a { text-decoration: none; margin: 0; padding: 0; } 結果1 上記のソースで行けると思っていたが、結果は下のようなレイアウトになった... cssが適用されていないのかと思ったが、きちんとソースには書いている.. デバッグモードで確認してみた。 すると、下の画像のように右に２つ領域が割り当てられているのを確認できた。 左端に、カーソルを合わせると、下のようになった。 ソース2 上の画像から、nav要素はきちんと適用されているが、ul要素には適用されていない。 ソースを変更してみた。 grid_practice2.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>グリッドレイアウト 練習</title> <link rel="stylesheet" href="base.css"> </head> <body> <header> <nav>←元々、ここにidを書いていた <ul id="nav_bar">←ここにidを移動した <li><a href="#">ナビ1</a></li> <li><a href="#">ナビ2</a></li> <li><a href="#">ナビ3</a></li> <li><a href="#">ナビ4</a></li> <li><a href="#">ナビ5</a></li> <li><a href="#">ナビ6</a></li> </ul> </nav> </header> </body> </html> すると、望んだレイアウトになった。 idを書く場所を間違えていた... グリッドの適用先が間違ってた... おわりに なぜ、うまくいかなかったのか？ nav要素に適用すれば、ul要素が自動的に割り当てられると思っていた。 けど、グリッドを適用したのはnavであって、ulではない。 だから、うまくいかなかった。 レイアウトの左上にulが埋め込まれ、そのなかで上から順にli要素が並んだ。 適用先をulに変えることで、li要素が左上から右に割り当てられた。 (この考えであってるはず...) ここまで読んでくれた上で、自分の考えが間違えていたら、指摘してくれるとありがたいです。
１ヶ月くらい、HTMLの書籍を読んで、一通り目を目を通した。 (といっても、まだ、理解できていないが...)
タイトルの通り、ナビゲーションバーをグリッドレイアウトでやってみた。
最初に書いたソースは下記の通り。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>グリッドレイアウト 練習</title> <link rel="stylesheet" href="base.css"> </head> <body> <header> <nav id="nav_bar"> <ul> <li><a href="#">ナビ1</a></li> <li><a href="#">ナビ2</a></li> <li><a href="#">ナビ3</a></li> <li><a href="#">ナビ4</a></li> <li><a href="#">ナビ5</a></li> <li><a href="#">ナビ6</a></li> </ul> </nav> </header> </body> </html>
body { width: 600px; margin-left: auto; margin-right: auto; } /* ヘッダー */ header { text-align: center; } #nav_bar { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; margin: 0; padding: 0; } #nav_bar li { list-style: none; margin: 0; padding: 0; border: solid 1px; background: #f3f3f3; } #nav_bar a { text-decoration: none; margin: 0; padding: 0; }
上記のソースで行けると思っていたが、結果は下のようなレイアウトになった...
cssが適用されていないのかと思ったが、きちんとソースには書いている.. デバッグモードで確認してみた。 すると、下の画像のように右に２つ領域が割り当てられているのを確認できた。
左端に、カーソルを合わせると、下のようになった。
上の画像から、nav要素はきちんと適用されているが、ul要素には適用されていない。 ソースを変更してみた。
nav
ul
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>グリッドレイアウト 練習</title> <link rel="stylesheet" href="base.css"> </head> <body> <header> <nav>←元々、ここにidを書いていた <ul id="nav_bar">←ここにidを移動した <li><a href="#">ナビ1</a></li> <li><a href="#">ナビ2</a></li> <li><a href="#">ナビ3</a></li> <li><a href="#">ナビ4</a></li> <li><a href="#">ナビ5</a></li> <li><a href="#">ナビ6</a></li> </ul> </nav> </header> </body> </html>
すると、望んだレイアウトになった。 idを書く場所を間違えていた... グリッドの適用先が間違ってた...
なぜ、うまくいかなかったのか？ nav要素に適用すれば、ul要素が自動的に割り当てられると思っていた。 けど、グリッドを適用したのはnavであって、ulではない。 だから、うまくいかなかった。 レイアウトの左上にulが埋め込まれ、そのなかで上から順にli要素が並んだ。
適用先をulに変えることで、li要素が左上から右に割り当てられた。 (この考えであってるはず...)
ここまで読んでくれた上で、自分の考えが間違えていたら、指摘してくれるとありがたいです。
ユーザーの選択に対してリアクションを返す機能を実装しようとしてselectタグ内の optionタグを発火点にしようとして四苦八苦したので共有します。 selecrtタグ?美味いの?と思う方は以下のリンクを読んでみてください －HTMLタグリファレンス - HTMLクイックリファレンス optionタグは発火点にできない 結論から言うとoptionタグは発火点にできません。しかし、selectタグ自身を発火点にすることができます。 js $(function(){ $(selectタグ).on("change", function(){ したい処理 }); }); selectタグの中身が変わる(optionタグがクリックされる)たびに発火しているのですね。 ちなみに作ったのはこんなものです。 実装に当たって苦労したこと seedsファイルで西暦テーブルを作りたい
ユーザーの選択に対してリアクションを返す機能を実装しようとしてselectタグ内の optionタグを発火点にしようとして四苦八苦したので共有します。
selecrtタグ?美味いの?と思う方は以下のリンクを読んでみてください －HTMLタグリファレンス - HTMLクイックリファレンス
結論から言うとoptionタグは発火点にできません。しかし、selectタグ自身を発火点にすることができます。
$(function(){ $(selectタグ).on("change", function(){ したい処理 }); });
selectタグの中身が変わる(optionタグがクリックされる)たびに発火しているのですね。 ちなみに作ったのはこんなものです。
seedsファイルで西暦テーブルを作りたい
ユーザーの選択に対してリアクションを返す機能を実装しようとした際、selectタグ内の optionタグを発火点にしようとして四苦八苦したので共有します。 selecrtタグ?美味いの?と思う方は以下のリンクを読んでみてください －HTMLタグリファレンス - HTMLクイックリファレンス optionタグは発火点にできない 結論から言うとoptionタグは発火点にできません。しかし、selectタグ自身を発火点にすることができます。 js $(function(){ $(selectタグ).on("change", function(){ したい処理 }); }); selectタグの中身が変わる(optionタグがクリックされる)たびに発火しているのですね。 ちなみに作ったのはこんなものです。 実装に当たって苦労したこと seedsファイルで西暦テーブルを作りたい
ユーザーの選択に対してリアクションを返す機能を実装しようとした際、selectタグ内の optionタグを発火点にしようとして四苦八苦したので共有します。
EmmetはHTML,CSSを簡潔に記述することができるプラグインです。 他にもSCSSやslimでも使用できます。詳しくは以下。 Emmet in Visual Studio Code VSCodeには標準でEmmetがインストールされているので、 インストールする手間が要らないです。 Emmetの基本ルール 記号 意味 要素>要素 直下の階層を指定 要素+要素 隣接する要素 要素*数字 要素を複製する ^ 一つ上の階層を指定 () グループ化 $ 連番にする #id名 divタグにid属性を設定 .クラス名 divタグにクラスを設定 [] 属性を設定 {} テキストを設定 サンプル HTMLをEmmetで記述したサンプルを載せておきます。 入力した文字列の終端でTABキーを押すと、HTMLに展開することができます。 .container divは省略することができます。 <div class="container"></div> link:css <link rel="stylesheet" href="style.css"> ul>li*4 <ul> <li></li> <li></li> <li></li> <li></li> </ul> ul>(li>a)*3 <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> ul>(li>a[href="sample$"])*3 $を付けることによって、連番で展開してくれます。 <ul> <li><a href="sample1"></a></li> <li><a href="sample2"></a></li> <li><a href="sample3"></a></li> </ul> header.l-header+main.l-container>article+aside^footer.l-footer <header class="l-header"></header> <main class="l-container"> <article></article> <aside></aside> </main> <footer class="l-footer"></footer> form:post>label{名前}+input:text[name="name"]+label{メールアドレス}+input:email[name="email"] <form action="" method="post"> <label for="">名前</label> <input type="text" name="name" id=""> <label for="">メールアドレス</label> <input type="email" name="email" id=""> </form> ! <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> 補足 エディタによっては展開できたり、できなかったりするバグがあるので、 そこらへんは臨機応変に対応しましょう。 例えば、半角カッコを入れると展開できなくなります。 p{HTML(ハイパーテキストマークアップランゲージ)} CSSをEmmetで記述する際に色を指定するプロパティの連結はおそらく展開できないです。 他のエディタだと展開できるかもしれません。 .sample { bg:#ccc+c:#fff } Emmetのチートシートはこちら Emmet チートシート
EmmetはHTML,CSSを簡潔に記述することができるプラグインです。 他にもSCSSやslimでも使用できます。詳しくは以下。 Emmet in Visual Studio Code
VSCodeには標準でEmmetがインストールされているので、 インストールする手間が要らないです。
HTMLをEmmetで記述したサンプルを載せておきます。 入力した文字列の終端でTABキーを押すと、HTMLに展開することができます。
TAB
.container divは省略することができます。
.container
<div class="container"></div>
link:css
<link rel="stylesheet" href="style.css">
ul>li*4
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
ul>(li>a)*3
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
ul>(li>a[href="sample$"])*3 $を付けることによって、連番で展開してくれます。
ul>(li>a[href="sample$"])*3
<ul> <li><a href="sample1"></a></li> <li><a href="sample2"></a></li> <li><a href="sample3"></a></li> </ul>
header.l-header+main.l-container>article+aside^footer.l-footer
<header class="l-header"></header> <main class="l-container"> <article></article> <aside></aside> </main> <footer class="l-footer"></footer>
form:post>label{名前}+input:text[name="name"]+label{メールアドレス}+input:email[name="email"]
<form action="" method="post"> <label for="">名前</label> <input type="text" name="name" id=""> <label for="">メールアドレス</label> <input type="email" name="email" id=""> </form>
!
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
エディタによっては展開できたり、できなかったりするバグがあるので、 そこらへんは臨機応変に対応しましょう。
例えば、半角カッコを入れると展開できなくなります。 p{HTML(ハイパーテキストマークアップランゲージ)}
p{HTML(ハイパーテキストマークアップランゲージ)}
CSSをEmmetで記述する際に色を指定するプロパティの連結はおそらく展開できないです。 他のエディタだと展開できるかもしれません。
.sample { bg:#ccc+c:#fff }
Emmetのチートシートはこちら Emmet チートシート
