- 投稿日:2020-02-15T23:20:11+09:00
透明感のあるテーブル
- 投稿日:2020-02-15T21:14:17+09:00
汎用)診療時間テーブル
- 投稿日:2020-02-15T18:11:40+09:00
htmlタグをcssで表示非表示
htmlタグをcssで表示非表示
非表示にするやり方は2種類あります。
visibilityで
visibilityを使うと、実際にそこにあるけど見えなくなるので、空白が生まれます。
- css
#abc { visibility: hidden; } /* 非表示 */ #abc { visibility: visible; } /* 表示 */
- ボタンで制御
<input type="button" value="表示" onclick="document.getElementById('abc').style.visibility = 'visible';"> <input type="button" value="非表示" onclick="document.getElementById('abc').style.visibility = 'hidden';">displayで
こちらはvisibilityとは違い、DOMそのものがなくなります。
- css
#xyz { display: none; } /* 非表示 */ #xyz { display: inline; } /* インラインで表示 */ #xyz { display: block; } /* ブロックで表示 */
- ボタンで制御
<input type="button" value="表示" onclick="document.getElementById('xyz').style.display = 'inline';"> <input type="button" value="非表示" onclick="document.getElementById('xyz').style.display = 'none';">
- 投稿日:2020-02-15T13:49:21+09:00
table) かんたんなレスポンシブルテーブル
col使ってますか
<table>
タグの中にちゃんと<col>
を入れていますか?
自分は<col>
の存在を知るまで数年かかりました。
使ってみたら本当に便利だったのでまずは基本的な使い方から。See the Pen JjdGvgg by sphenisc (@sphenisc) on CodePen.
本来CSSでthやtdの長さを指定していと中身のテキスト量に応じて自動でthやtdの横幅が変化するのですがcolにそれぞれ25% 25% 50%と指定しているためキレイに表示できています。
widthの数値を変更してもこの割合は維持されるので最近のレスポンシブ環境の適正が高そうです。応用
See the Pen RwPrBWM by sphenisc (@sphenisc) on CodePen.
SP幅にすると変形するテーブル
See the Pen MWwKNEO by sphenisc (@sphenisc) on CodePen.
このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも
- 投稿日:2020-02-15T13:49:21+09:00
かんたんなレスポンシブルテーブル
col使ってますか
<table>
タグの中にちゃんと<col>
を入れていますか?
自分は<col>
の存在を知るまで数年かかりました。
使ってみたら本当に便利だったのでまずは基本的な使い方から。See the Pen JjdGvgg by sphenisc (@sphenisc) on CodePen.
本来CSSでthやtdの長さを指定していと中身のテキスト量に応じて自動でthやtdの横幅が変化するのですがcolにそれぞれ25% 25% 50%と指定しているためキレイに表示できています。
widthの数値を変更してもこの割合は維持されるので最近のレスポンシブ環境の適正が高そうです。応用
See the Pen RwPrBWM by sphenisc (@sphenisc) on CodePen.
SP幅にすると変形するテーブル
See the Pen MWwKNEO by sphenisc (@sphenisc) on CodePen.
このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも