What's New Qiita

20200324のHTMLに関する記事は8件です。

  • 投稿日：2020-03-24T22:02:46+09:00

初心者が見落としてしまったメディアクエリの書き順

こんにちは。今回はSASSでメディアクエリを使い始めた頃に詰まってしまった所をお伝えしたいと思います。

index.html
...（省略）
  <body>
    <h1>hogehoge</h1>
  </body>
...（省略）

このhtmlに対して、以下のように設定するとmdサイズのときの設定(color:blue)が反映されません。何故でしょうか？

style.scss
$breakpoints: (
  "sm": "screen and (min-width: 375px)",
  "md": "screen and (min-width: 425px)"
) !default;
@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

h1 {
  color: blue;
  @include mq(md) {
    // 「425px以上はcolor: red」
    color: red;
  }
  @include mq(sm) {
    // 「375px以上はcolor: green」
    color: green;
  }
}

そう、@include mq(md)の後に@include mq(sm)を設定しているからです。超基本なことですが、（詳細度が同じだったら）CSSのルールは後に書いた方が反映されます。なので、@include mq(md)と@include mq(sm)の順番を入れ替えましょう。そうするとちゃんと意図した通りに反映されます。

style.scss
$breakpoints: (
  "sm": "screen and (min-width: 375px)",
  "md": "screen and (min-width: 425px)"
) !default;
@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

h1 {
  color: blue;
  @include mq(sm) {
    // 「375px以上はcolor: green」
    color: green;
  }
  @include mq(md) {
    // 「425px以上はcolor: red」
    color: red;
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-24T18:14:00+09:00

selectをカスタマイズするやーつ

See the Pen custom select by Tadatsugu Sampei (@pe-ta) on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-24T16:33:00+09:00

メンテナンスページのHTMLの書き方

Webサービスをメンテナンスモードに入れるためのサーバー設定の記事は数多くあるが、肝心の「メンテナンス告知ページのHTMLをどう作るか」という部分があまり語られないので、そのことを中心にまとめた。

前提：ウェブサーバーをメンテナンスモードにするには

メンテナンスページを除いた全てのページでHTTPステータスコード503を返すようにする。
正しくステータスコードを返さないと格好悪いことになってしまうので気をつける。

設定例は「Apache メンテナンス」とか「nginx メンテナンス」とかでググると山ほど出てくるので割愛。
AWSを利用している場合はALBやCloudFrontでメンテナンスページ（Sorry Page)の機能がIaaS側にあるのでそれを利用すると良い。
DNSレベルでサーバーを切り替えてメンテナンスページを表示する方法（僕は心の中で乙武法と呼んでいる）は、DNS切り替えのタイミングがきっちりしないというのと、切り替え先で503を返すなど手間なので、本当に緊急な時以外はあまり採用したくない。

メンテナンスページの作り方

メンテナンスページは複雑なことをしようと思うとトラブルのもとなので極力シンプルな実装を心がける。

1ファイルで完結させる
CSSや画像を別ファイルで用意するとApacheやnginxの設定がややこしくなるし、ALBのSorry Pageのような複数ファイルに対応していない場合に利用できないので、CSSはhead内に書くかインラインで、画像はbase64で埋め込み1ファイルにまとめる。
ログファイル的にも画像やCSSの200アクセスがなくなるので状況を把握しやすくなる（と思う）。
（一応faviconもbase64で埋め込むことが可能だが、IE11, Edgeでは表示されないようなので無理して入れることはない）

HTML5(プログレッシブ・エンハンスメント)
サービス自体がIE11を未だサポートしていたりする場合はメンテナンスページも対応せざるを得ないのでプログレッシブ・エンハンスメントで実装する。
ただ複雑なことをやるわけでもないので普通に書けばIE11でも正常に表示されるはず。

日本語UTF-8対応
今どきめったなことでは文字化けなんてしないけれども、お行儀よくlangとcharsetの指定はしたい。

幅640pxくらいでレスポンシブ
スマホであれば幅はママでいいが、さすがにPCで幅の制限をかけないと少し間抜けになってしまうので多少狭めで。

Analyticsは入れなくてもいいのでは
判断が分かれるかもしれないが、個人的には意図的に起こしている503ページのアクセスは統計に入れたくないというのと、メンテナンス中にプライバシーポリシーページが見られないことやGDPRのことを考えると入れなくて良いと思う。

連絡手段を提示する
メンテナンスに入っているということは問い合わせフォームも見られないため、ユーザーからすると連絡手段が見えなくなってしまう。
メンテナンス中にユーザーから問い合わせ電話が入ったという話も聞くので、電話に対応できるリソースがないのであればメールアドレスなりGoogleフォームなりを明記したほうが良い。

いつからいつまでのメンテナンスか
Backlogの503ページにTwitterが埋め込まれていて、メンテナンス状況がリアルタイムで把握できてなかなかいいやり方だなと思ったので、定期メンテナンスなどが必要な場合は検討したい。
ただ基本的に意図的に入れたメンテナンスであればシンプルに終了時刻を目立たせてあげる方がユーザーにはわかりやすいと思うので、Twitterは単にリンクなどで見せるだけでも良いような気もする。

HTMLの例

簡易的な表示確認しかしていないので擬似コード程度のものとして見てほしい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ただいまメンテナンス中です | EXAMPLE.COM</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #eee;
  }
  #conainer {
    margin: 0 auto;
    padding: 20px;
    max-width: 600px;
    background: #fff;
  }
  h1 {
    font-size: 2em;
  }
  .warn {
    padding: 1em;
    background: #ff7;
  }
  .note {
    font-size: 0.8em;
  }
  #footer {
    text-align: center;
  }
</style>
</head>

<body>
  <div id="conainer">
    <img src="data:image/png;base64,略" alt="EXAMPLE.COM">
    <h1>ただいまメンテナンス中です</h1>
    <p>
      システムアップデートのためサービスを停止しています。<br>
      ユーザーの皆様にはご不便をおかけしますが、メンテナンス終了まで今しばらくお待ち下さい。<br>
    </p>
    <h2>メンテナンス期間</h2>
    <p class="warn">
        2020年1月1日（水） 00:00 〜 <strong>12月31日（木） 23:59</strong><br>
    </p>
    <p class="note">
      実施時間は前後する可能性があります。<br>
      最新の情報は<a href="https://twitter.com/{username}">Twitter</a>にて更新しています。<br>
    </p>
    <h2>
     お問い合わせ
    </h2>
    <p>
      メンテナンスに関するお問い合わせは<a href="mailto:maintenance@example.com">maintenance@example.com</a>までお願いします。
    </p>
    <hr>
    <div id="footer">
      &copy; example.com
    </div>
  </div>
</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-24T15:56:47+09:00

[CSS/js]tableの行/列ヘッダーを固定する

はじめに

最近Webアプリ周辺の技術を学び始めた者です。普段は製造業で設計業務を担当しておりますが、社内システム構築用にいろいろと勉強しています。主に使うのは下記。

  • 言語 : python/C#
  • Web framework : django

記事に書き出すことで自身の理解も深まると考え、今回初投稿をさせて頂きます。

動機

休日に妻と共同でアプリ開発をしています(この開発記録もつけられたらなーと思っています)。
tableを多用するのですが、その際列ヘッダーと行ヘッダーを固定してtbodyのデータセルだけスクロールできないかなと考え、いろいろ調べていました。
便利なプラグインもたくさんありましたが、

  • 複数ヘッダーを固定できるものが限られていた
  • なるべく既存のtableに変更を加えたくない

という理由で手を出せず。position:stickyというステキなオプションがあるので、どうにかこれを使ってできないかと思い、やってみました。
なおこちらのstackoverflowの質問を参考にしました→Table with fixed header and fixed column on pure css

html

下記のようなtableと、wrapperとなるdivを用意します。class名はbootstrapを意識しています。

sample.html
<div class="table-wrapper">
    <table class="table text-nowrap sticky-table table-borderless">
        <thead class="thead-light">
            <tr class="fixed-header-0">
                <th class="fixed-column-0">日付</th>
                <th>1/1</th>
                <th>1/2</th>
                <th>1/3</th>
                <th>1/4</th>
                <th>1/5</th>
                <th>1/6</th>
                <th>1/7</th>
            </tr>
            <tr class="fixed-header-1">
                <th class="fixed-column-0">曜日</th>
                <th>月</th>
                <th>火</th>
                <th>水</th>
                <th>木</th>
                <th>金</th>
                <th>土</th>
                <th>日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="fixed-column-0 table-light">AM</th>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>×</td>
                <td>×</td>
                <td>〇</td>
                <td>〇</td>
            </tr>
            <tr>
                <th class="fixed-column-0 table-light">PM</th>
                <td>×</td>
                <td>〇</td>
                <td>〇</td>
                <td>×</td>
                <td>〇</td>
                <td>×</td>
                <td>〇</td>
            </tr>
            <tr>
                <th class="fixed-column-0 table-light">夜</th>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>×</td>
            </tr>
        </tbody>
    </table>
</div>
日付 1/1 1/2 1/3 1/4 1/5 1/6 1/7
曜日 月 火 水 木 金 土 日
AM 〇 〇 〇 × × 〇 〇
PM × 〇 〇 × 〇 × 〇
夜 〇 〇 〇 〇 〇 〇 ×

ゴールは上記tableの「日付」「曜日」行を固定しつつ、「AM」「PM」「夜」も常に表示することです。

wrapperにはclass=table-wrapper、tableにはclass=sticky-tableを指定します。また、固定したい行ヘッダーとなる各trには上から順にclass=fixed-header-n(nは0始まりの番号)を指定し、固定したい列ヘッダーとなる各thには左から順にclass=fixed-column-m(mは0始まりの番号)を指定します。
tableの左上の場所は行列方向に拘束したいので、tr.fixed-header-nおよびth.fixed-column-mの両方の指定が必要です。

ちなみにヘッダーにtable-lightやthead-lightで色を付けているのは、透明のままだとヘッダー固定したときに他のセルと重なってしまうからです。

css/js

下記のようなcssとjsを作成します。

sticky-table.css
/*ラッパー*/
div.table-wrapper {
  overflow: scroll;
  max-height:500px; /*任意*/
  max-width:1000px; /*任意*/
}

/*行ヘッダーを固定する。topの値はjsで動的に指定*/
table.sticky-table thead tr[class*="fixed-header-"] th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    /* tbody tdより手前に表示する */
    z-index: 1;
}

/*行ヘッダーと列ヘッダーが重なる部分を固定する。top,leftの値はjsで動的に指定*/
table.sticky-table thead tr[class*="fixed-header-"] th[class*="fixed-column-"] {
    /* 全てのセルより手前に表示する */
    z-index: 2;
}

/*列ヘッダーを固定する。leftの値はjsで動的に指定*/
table.sticky-table tbody th[class*="fixed-column-"] {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    /* tbody tdより手前に表示する */
    z-index: 1;
}

コメントを添えていますが、

div.table-wrapper {
  overflow: scroll;
  max-height:500px; /*任意*/
  max-width:1000px; /*任意*/
}

はwrapperの挙動です。max-height/max-widthは任意の値に設定してください。

続いて下記のような.jsを作成します。結局jqueryで書いてしまった。

sticky-table.js
//行ヘッダーに対しtopを設定
height = 0;
for (var i = 0; i < fixed_header_num; i++) {
    $(".fixed-header-" + i + " th").css('top', height);
    height += $(".fixed-header-" + i + " th").outerHeight();
}

//列ヘッダーに対しleftを設定
width = 0;
for (var j = 0; j < fixed_column_num; j++) {
    $("th.fixed-column-" + j).css('left', width);
    width += $("th.fixed-column-" + j).outerWidth(true);
}

jsでは固定したい各ヘッダーに対し、「どこまでの位置に達したら上/左方向への移動を拘束するか」の値となるtop/leftの値を動的に設定しています。一番上のヘッダーはtop=0でよいのですが、二番目以降のヘッダーは自身の上にあるヘッダーの累積高さ分の値を設定しています。列ヘッダーも同様。

fixed_header_num, fixed_column_numはそれぞれ、固定したい行/列ヘッダーの数なのですが、これらは使用シーンに合わせて変わると思うので、グローバルで宣言することにします。

使用例

下記のツリー構造を仮定します。

sticky-table/
　├ sample.html
　└ static/
　  ├ css/
　  │ └ sticky-table.css
　  └ js/
      └ sticky-table.js
sample.html
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8" />
    <title>ヘッダー固定</title>

    <!--bootstrap-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!--sticky-table-->
    <link rel="stylesheet" href="static/css/sticky-table.css">
</head>
<body>
    <!--https://stackoverflow.com/questions/15811653/table-with-fixed-header-and-fixed-column-on-pure-css-->
    <div class="container">
        <div class="table-wrapper">
            <table class="table text-nowrap sticky-table table-borderless">
                <thead class="thead-light">
                    <tr class="fixed-header-0">
                        <th class="fixed-column-0">日付</th>
                        <th>1/1</th>
                        <th>1/2</th>
                        <th>1/3</th>
                        <th>1/4</th>
                        <th>1/5</th>
                        <th>1/6</th>
                        <th>1/7</th>
                    </tr>
                    <tr class="fixed-header-1">
                        <th class="fixed-column-0">曜日</th>
                        <th>月</th>
                        <th>火</th>
                        <th>水</th>
                        <th>木</th>
                        <th>金</th>
                        <th>土</th>
                        <th>日</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th class="fixed-column-0 table-light">AM</th>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>×</td>
                        <td>×</td>
                        <td>〇</td>
                        <td>〇</td>
                    </tr>
                    <tr>
                        <th class="fixed-column-0 table-light">PM</th>
                        <td>×</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>×</td>
                        <td>〇</td>
                        <td>×</td>
                        <td>〇</td>
                    </tr>
                    <tr>
                        <th class="fixed-column-0 table-light">夜</th>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>×</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
    <!--jquery+bootstrap-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!--sticky-table-->
    <script type="text/javascript">
        //固定するヘッダーの数
        var fixed_header_num = 2;

        //固定するカラムの数
        var fixed_column_num = 1;
    </script>
    <script src="static/js/sticky-table.js"></script>
</body>
</html>

image.png

これで任意の数の行/列ヘッダーをcss/jsのみで固定することができます。

課題

Chromeでは動作確認しましたが、IEだとpolyfillが必要みたいです。
stickyfill

また、globalで変数指定が必要だったり、洗練されてないイメージもあるので、もっとうまいやり方がありましたらご教示頂ければ幸いです。

参考

Table with fixed header and fixed column on pure css
stickyfill

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-24T15:56:47+09:00

[CSS/jsのみ]tableの行/列ヘッダーを固定する

はじめに

最近Webアプリ周辺の技術を学び始めた者です。普段は製造業で設計業務を担当しておりますが、社内システム構築用にいろいろと勉強しています。主に使うのは下記。

  • 言語 : python/C#
  • Web framework : django

記事に書き出すことで自身の理解も深まると考え、今回初投稿をさせて頂きます。

動機

休日に妻と共同でアプリ開発をしています(この開発記録もつけられたらなーと思っています)。
tableを多用するのですが、その際列ヘッダーと行ヘッダーを固定してtbodyのデータセルだけスクロールできないかなと考え、いろいろ調べていました。
便利なプラグインもたくさんありましたが、

  • 複数ヘッダーを固定できるものが限られていた
  • なるべく既存のtableに変更を加えたくない

という理由で手を出せず。position:stickyというステキなオプションがあるので、どうにかこれを使ってできないかと思い、やってみました。
なおこちらのstackoverflowの質問を参考にしました→Table with fixed header and fixed column on pure css

html

下記のようなtableと、wrapperとなるdivを用意します。class名はbootstrapを意識しています。

sample.html
<div class="table-wrapper">
    <table class="table text-nowrap sticky-table table-borderless">
        <thead class="thead-light">
            <tr class="fixed-header-0">
                <th class="fixed-column-0">日付</th>
                <th>1/1</th>
                <th>1/2</th>
                <th>1/3</th>
                <th>1/4</th>
                <th>1/5</th>
                <th>1/6</th>
                <th>1/7</th>
            </tr>
            <tr class="fixed-header-1">
                <th class="fixed-column-0">曜日</th>
                <th>月</th>
                <th>火</th>
                <th>水</th>
                <th>木</th>
                <th>金</th>
                <th>土</th>
                <th>日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="fixed-column-0 table-light">AM</th>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>×</td>
                <td>×</td>
                <td>〇</td>
                <td>〇</td>
            </tr>
            <tr>
                <th class="fixed-column-0 table-light">PM</th>
                <td>×</td>
                <td>〇</td>
                <td>〇</td>
                <td>×</td>
                <td>〇</td>
                <td>×</td>
                <td>〇</td>
            </tr>
            <tr>
                <th class="fixed-column-0 table-light">夜</th>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>〇</td>
                <td>×</td>
            </tr>
        </tbody>
    </table>
</div>

image.png

ゴールは上記tableの「日付」「曜日」行を固定しつつ、「AM」「PM」「夜」も常に表示することです。

wrapperにはclass=table-wrapper、tableにはclass=sticky-tableを指定します。また、固定したい行ヘッダーとなる各trには上から順にclass=fixed-header-n(nは0始まりの番号)を指定し、固定したい列ヘッダーとなる各thには左から順にclass=fixed-column-m(mは0始まりの番号)を指定します。
tableの左上の場所は行列方向に拘束したいので、tr.fixed-header-nおよびth.fixed-column-mの両方の指定が必要です。

ちなみにヘッダーにtable-lightやthead-lightで色を付けているのは、透明のままだとヘッダー固定したときに他のセルと重なってしまうからです。

css/js

下記のようなcssとjsを作成します。

sticky-table.css
/*ラッパー*/
div.table-wrapper {
  overflow: scroll;
  max-height:200px; /*任意*/
  max-width:400px; /*任意*/
}

/*行ヘッダーを固定する。topの値はjsで動的に指定*/
table.sticky-table thead tr[class*="fixed-header-"] th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    /* tbody tdより手前に表示する */
    z-index: 1;
}

/*行ヘッダーと列ヘッダーが重なる部分を固定する。top,leftの値はjsで動的に指定*/
table.sticky-table thead tr[class*="fixed-header-"] th[class*="fixed-column-"] {
    /* 全てのセルより手前に表示する */
    z-index: 2;
}

/*列ヘッダーを固定する。leftの値はjsで動的に指定*/
table.sticky-table tbody th[class*="fixed-column-"] {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    /* tbody tdより手前に表示する */
    z-index: 1;
}

コメントを添えていますが、

div.table-wrapper {
  overflow: scroll;
  max-height:200px; /*任意*/
  max-width:400px; /*任意*/
}

はwrapperの挙動です。max-height/max-widthは任意の値に設定してください。

続いて下記のような.jsを作成します。結局jqueryで書いてしまった。

sticky-table.js
//行ヘッダーに対しtopを設定
height = 0;
for (var i = 0; i < fixed_header_num; i++) {
    $(".fixed-header-" + i + " th").css('top', height);
    height += $(".fixed-header-" + i + " th").outerHeight();
}

//列ヘッダーに対しleftを設定
width = 0;
for (var j = 0; j < fixed_column_num; j++) {
    $("th.fixed-column-" + j).css('left', width);
    width += $("th.fixed-column-" + j).outerWidth(true);
}

jsでは固定したい各ヘッダーに対し、「どこまでの位置に達したら上/左方向への移動を拘束するか」の値となるtop/leftの値を動的に設定しています。一番上のヘッダーはtop=0でよいのですが、二番目以降のヘッダーは自身の上にあるヘッダーの累積高さ分の値を設定しています。列ヘッダーも同様。

fixed_header_num, fixed_column_numはそれぞれ、固定したい行/列ヘッダーの数なのですが、これらは使用シーンに合わせて変わると思うので、グローバルで宣言することにします。

使用例

下記のツリー構造を仮定します。

sticky-table/
　├ sample.html
　└ static/
　  ├ css/
　  │ └ sticky-table.css
　  └ js/
      └ sticky-table.js
sample.html
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8" />
    <title>ヘッダー固定</title>

    <!--bootstrap-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!--sticky-table-->
    <link rel="stylesheet" href="static/css/sticky-table.css">
</head>
<body>
    <!--https://stackoverflow.com/questions/15811653/table-with-fixed-header-and-fixed-column-on-pure-css-->
    <div class="container">
        <div class="table-wrapper">
            <table class="table text-nowrap sticky-table table-borderless">
                <thead class="thead-light">
                    <tr class="fixed-header-0">
                        <th class="fixed-column-0">日付</th>
                        <th>1/1</th>
                        <th>1/2</th>
                        <th>1/3</th>
                        <th>1/4</th>
                        <th>1/5</th>
                        <th>1/6</th>
                        <th>1/7</th>
                    </tr>
                    <tr class="fixed-header-1">
                        <th class="fixed-column-0">曜日</th>
                        <th>月</th>
                        <th>火</th>
                        <th>水</th>
                        <th>木</th>
                        <th>金</th>
                        <th>土</th>
                        <th>日</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th class="fixed-column-0 table-light">AM</th>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>×</td>
                        <td>×</td>
                        <td>〇</td>
                        <td>〇</td>
                    </tr>
                    <tr>
                        <th class="fixed-column-0 table-light">PM</th>
                        <td>×</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>×</td>
                        <td>〇</td>
                        <td>×</td>
                        <td>〇</td>
                    </tr>
                    <tr>
                        <th class="fixed-column-0 table-light">夜</th>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>〇</td>
                        <td>×</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
    <!--jquery+bootstrap-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!--sticky-table-->
    <script type="text/javascript">
        //固定するヘッダーの数
        var fixed_header_num = 2;

        //固定するカラムの数
        var fixed_column_num = 1;
    </script>
    <script src="static/js/sticky-table.js"></script>
</body>
</html>

image.png

これで任意の数の行/列ヘッダーをcss/jsのみで固定することができます。

課題

Chromeでは動作確認しましたが、IEだとpolyfillが必要みたいです。
stickyfill

また、globalで変数指定が必要だったり、洗練されてないイメージもあるので、もっとうまいやり方がありましたらご教示頂ければ幸いです。

参考

Table with fixed header and fixed column on pure css
stickyfill

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-24T14:45:17+09:00

「初心者向け」jquery.mCustomScrollbarスクロールバーの使用 

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
<link href="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<style>
    .content {
        width: 200px;
        height: 200px;
    }
</style>
<div class="content">
    <p>
    Qiitaは「プログラミングに関する知識を記録・共有するためのサービス」ですので、再利用性・汎用性の高い情報が多く集まっている場をつくっていきたいと考えています。
    そのためには、記事を読むこと、記事を書くことを通して、読む側・書く側それぞれがお互いに関わり合って、再利用性・汎用性の高い情報を育てていきましょう。
    </p>
</div>
<script>
    (function($) {
        $(window).load(function() {
            $(".content").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                },
                theme: "3d-thick"
            });
        });
    })(jQuery);
</script>

図
Snipaste_2020-03-24_13-41-56.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-24T10:09:52+09:00

以下のサイトのコードの完全版欲しいです

GASで作る社内ツール (キャンセル・報告編
https://qiita.com/nyanko-box/items/905d224d3ba8d3d00796

ソースコードそのままコピペしても、
キャンセル、報告ボタンが書かれておらず動きません。完全に動くソースコードが欲しいです。

当方、プログラミング初心者につき、最初は先人のマネから入って、
カスタマイズして、業務に応用させたく、どなたかお力添えはただけると幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-24T05:08:46+09:00

初心者によるプログラミング学習ログ 271日目

100日チャレンジの271日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
271日目は、

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

日付別

タグ一覧