20200215のHTMLに関する記事は7件です。

透明感のあるテーブル

thとtdの間に隙間を開けて背景透過

See the Pen ZEGWGBm by sphenisc (@sphenisc) on CodePen.

涼しげなサイトに良さそうですね。

border-collapse: separate;
border-spacing: 0.5em;

thとtdに隙間を開ける

background: linear-gradient(170deg, rgba(#eef, 0.8), rgba(#ccf, 0.3));

背景を水色っぽいグラデーションに。0.8と0.3の数値の部分で不透明度を変更できます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML + CSSでリアルなチョコレートを作る

HTML + CSSでリアルなチョコレートを作る

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

+ CSSでリアルなチョコレートを作る

HTML + CSSでリアルなチョコレートを作る

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

汎用)診療時間テーブル

忙しい時にコピペするためのやつ

See the Pen mdJPyXd by sphenisc (@sphenisc) on CodePen.

横幅375px(iPhone6~8)くらいまでならスマホでも崩れない。
PCの時 全体550px/診療時間210px/月~祝340px として計算しています。

  • 横幅をもっと大きくしたい → max-width: 550px; @return $length / 550 * 100%; を550から変更する
  • 祝日いらない → HTMLから各行の末尾のth td tdを消してwidth: size_tbl(340/8);/7にする
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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';">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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.

このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

かんたんなレスポンシブルテーブル

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.

このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む