20200921のCSSに関する記事は8件です。

投稿日：2020-09-21T23:43:25+09:00

Twitterクローンもどき作成までの過程

PC版のTwitterのようなサイトを作ろうと思って調べたことをまとめていきます

要素をきっちり3分割
target{
 width : calc(100% / 3) ;
}
参考：【CSSで3等分】要素をきっちり三分割するスタイルシートの書き方

画面サイズ取得

画面取得するには以下を使用する
この取得したサイズに応じて表示する内容を変更したりする
どちらもスクロールサイズを除くサイズ

縦サイズ
document.documentElement.clientWidth
横サイズ
document.documentElement.clientWidth
画面サイズ変更の監視
window.addEventListener('resize',()=>{
  //処理
}
参考：要素のリサイズに応じてイベントを発動する方法

入力ボックス

入力ボックスはHTML5の contentEditable 属性を使う
この属性をtrueにすると編集できるようになる
inputを使うよりもシンプルな入力画面になる
<div contentEditable="true">入力ボックス</div>
aの下線部を消す
text-decoration: none;
Twitterのようなタイムラインの形のテンプレート
<body style="background-color:rgb(54, 3, 3)">
    <div style="background-color: rgb(107, 107, 2);width: 500px;display: inline-flex;">
        
        <div style="background-color: rgb(104, 101, 101);">
            <img src="image/bell.png" alt="" style="width: 50px;">
        </div>
        
        <div style="display: block;">
            <div style="background-color: rgb(109, 65, 65);">あああ</div>
            <div style="background-color: rgb(69, 65, 109);">いいい</div>
            <div style="background-color: rgb(65, 109, 88);">ううう</div>
            
        </div>

    </div>

</body>
block要素を上下左中央に配置
.outer{
  position: relative;
}
.inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
引用：CSSで要素を上下や左右から中央寄せする7つの方法

フォーカスインとフォーカスアウト

addEventListenerでコントロールするものいいが特定のタグであれば
onfocusとonblur属性がいい仕事をしてくれる

属性説明

onfocus フォーカスしたとき

onblur フォーカスアウトしたとき
例
<input placeholder="キーワード検索" type="text" onblur="focusOut(this)" onfocus="focus(this)">
thisでその要素自体を取得できる

気になったcssプロパティなど

flex-basis

コンテンツボックスの寸法を定義

属性	説明
onfocus	フォーカスしたとき
onblur	フォーカスアウトしたとき

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-21T22:51:27+09:00

::webkit-scrollbar プロパティ一覧

何気に Edge が Chromium になって、出来ないのはあと Firefox だけなんですね

::-webkit-scrollbar

スクロールバー全体
角のやつ (scrollbar-corner) は含まれないっぽい

::-webkit-scrollbar-button

端にある上下左右のボタン

::-webkit-scrollbar-thumb

スクロールバー

::-webkit-scrollbar-track

スクロールバーが表示されてるとこ、トラック
スクロールバー全体 (scrollbar) からボタン (scrollbar-button) を除いた範囲

::-webkit-scrollbar-track-piece

現在のスクロール位置までで分割されてるトラック (？)

::-webkit-scrollbar-corner

縦横のスクロールバーの交差するとこ

::-webkit-resizer

textarea とかで、リサイズできる時に右下に表示されるやつ
範囲は交差するとこの (scrollbar-corner) と同じ

分かりやすいような分かりにくいようなサンプル

See the Pen scrollbar on CodePen.

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-21T22:46:30+09:00

(´ω｀) わいが清掃のお仕事してた頃に作ったアプリってのがある

ホテル清掃の経験ある人フォロワーになってくれないか。
３つ目の記事になるがQiitaからフォローしてくれた人は0だ。来てくれたら歓迎するよ。

何をしてたか

ホテル清掃をしていた頃、全ての作業は分担されておりベッドの人はベッドを何部屋もやる。バスルームも同じだ。おかげで某ビジネスホテルだがシングルのベッドなら３分で出来るようになったしバスルームでも７、８分で行えるようになった。
つまり、みんながキーボード触っている時期にわいは便所に手を突っ込んで掃除しながらたまに便器からはみ出た?をキレイにしてた。それから３時間５６台の勢いでベッドをひたすら組んでいた。とはいっても毎日じゃない。

何をしたいか

ただし、部屋数が増えてくればだれてくるし汚れている部屋であれば多少なりとも予定作業時間を過ぎてしまう。といったことが起こる。当たり前の話だ。そういったときにこのアプリが活かせる。自分が遅れているのか早く進んでいるか把握できるようになる。

何を作ったか

タイマーだ。部屋数と時刻を２か所入力する（作業開始時刻と作業時間）。あとは?ボタンを押すごとに時間が記録され予定完了時刻より早ければ緑、遅ければ赤に行色が変わる。

何を使ったか

・画面は Fomantic-UI
・時刻入力は CleaveJS
・現在時刻取得は MomentJS
・部屋毎の作業時間計算は MomentDuration
・また比較演算子を関数で行いたかったから Predicate

どう作ったか

index.html

<!doctype html>
 <html>
  <head>

   <title></title>

   <meta charset='utf-8'>
   <meta content='' name='author'>
   <meta content='' name='description'>
   <meta content='' name='application-name'>
   <meta content='telephone=no,address=no,email=no,date=no,url=no' name='format-detection'>
   <meta content='noimageindex,notranslate,nosnippet,noarchive,nofollow,noindex' name='robots'>
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'>

   <link href='css/fomantic-ui/2.7.8.min.css' rel='stylesheet' media='screen'>
   <link href='asset/progressive-web.json' rel='manifest'>
   <link href='asset/favicon.ico' rel='icon'>

   <style name='font'>
     @font-face{
       font-family:'M+2VM+IAPG circle';
       src:url('asset/m+2vm+ipag-circle.ttf');
     }
     @font-face{
       font-family:'gidole';
       src:url('asset/gidole.ttf');
     }
  </style>

   <style>
     /*
      * 視認
      */
     html,
     body{
       font-size:14px;
     }
     .ui.table td,
     .ui.table input{
       font-family:'gidole';
     }
     .ui.table>thead>tr>th,
     .ui.table>tbody>tr>td{
       padding:0;
     }
     /*
      * 入力
      */
     .ui.table input[type='number']{
       -moz-appearance:textfield;
     }
     .ui.table input::-webkit-outer-spin-button,
     .ui.table input::-webkit-inner-spin-button{
       -webkit-appearance: none;
     }
     .ui.table input{
       background:transparent;
       text-align:center;
       appearance:none;
       outline:none;
       border:none;
       width:100%;
     }
     /*
      * 見栄
      */
     .ui.table thead tr:first-child>th:first-child{
       width:3em;
     }
     .ui.card,
     .ui.label,
     .ui.table,
     .ui.buttons{
       border-bottom:2px solid rgba(34,36,38,.15) !important;
       box-shadow:rgba(16, 36, 94, 0.4) 0 2px 6px 0 !important;
     }
     .ui.card .description p{
       font:12px 'M+2VM+IPAG circle';
       line-height:1.2;
       color:black;
     }
     /*
      * アイコン
      */
     i.icon.thumbs-up:before {
       content: '\f164';
     }
  </style>

 </head>
  <body>
   <main>
     <div class='ui grid padded'>
       <div class='row'>
         <div class='column'>
           <div class='ui card fluid'>
             <div class='image'>
               <img src='asset/businesshotel-9956-400x400.png'>
            </div>
             <div class='content'>
               <div class='description'>
                 <p>ホテル清掃の進捗を管理するアプリです。予定通り進んでいるか緑と赤のバランスでわかります。上のテーブルを入力して作業を開始しましょう。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
       <div class='row'>
         <div class='column'>

           <table class='ui table unstackable celled fixed center aligned blue'>
             <thead>
               <tr>
                 <th>数</th>
                 <th>開始時刻</th>
                 <th>作業時間</th>
              </tr>
            </thead>
             <tbody>
               <tr>
                 <td><input type='number' v-model.number='rooms'></td>
                 <td><input type='tel' v-model='time.base' ref='v1'></td>
                 <td><input type='tel' v-model='time.task' ref='v2'></td>
              </tr>
            </tbody>
          </table>

           <table class='ui table unstackable celled fixed center aligned blue'>
             <thead>
               <th>No.</th>
               <th>予定時刻</th>
               <th>完了時刻</th>
            </thead>
             <tbody>
               <tr v-for='(no,i) in rooms' :class="[lt(i)]">
                 <td>{{no}}</td>
                 <td>{{estimate[i] | HHmmss }}</td>
                 <td>{{complete[i] | HHmmss }}</td>
              </tr>
            </tbody> 
          </table>

           <div class='ui buttons two blue'>
             <button class='ui button icon' @click='reset'>
               <i class='icon file'></i>
            </button>
             <button class='ui button icon' @click='stamp'>
               <i class='icon thumbs-up'></i>
            </button>
          </div>

        </div>
      </div>
    </div>
  </main>
 </body>

  <!-- native -->
  <script src='js/native/moment-2.24.0.min.js'></script>
  <script src='js/native/moment-duration-format-2.3.2.min.js'></script>
  <script src='js/native/predicate-1.2.0.min.js'></script>
  <script src='js/native/cleave-1.5.3.min.js'></script>

  <!-- vue -->
  <script src='js/vue/2.6.10.js'></script>
  <script>
    new Vue({
      el:'main',
      data:{
        /*
         * 入力用のデータ
         */
        time:{
          base:null,    /* 作業開始時刻        */
          task:null,    /* 作業平均時間（作業者）*/
        },
        rooms:10,       /* 作業予定個数（部屋数）*/

        /*
         * 進捗用のデータ
         */
        estimate:[      /* 作業完了予定時刻     */
        ],
        complete:[      /* 作業完了実際時刻     */
        ],

        /*
         * 入力用のバリデーション（時刻と時間）
         */
        validation:{
          time:true,
          timePattern:['h','m','s']
        }
      },
      filters: {
        HHmmss:function(ts) {
          if(ts !== undefined){
            /* 何時:何分:何秒 */
            return moment(ts).format('HH:mm:ss')
          }
        }
      },
      computed:{
        timeChanged:function(){
          /* 部屋数と時刻が修正されたことを監視 */
          return this.rooms && this.time
        },
      },
      watch:{
        timeChanged:{
          deep:true,
          handler:function(){
            /* 再計算 */
            this.calc()
          }
        }
      },
      methods:{
        lt:function(i){
          /* 予定より遅い or 早い */
          return (i < this.complete.length) ? 
            (predicate.lt(this.estimate[i],this.complete[i]) ? 'negative' : 'positive') : null
        },
        stamp:function(){
          /* 作業完了 */
          if(this.complete.length < this.rooms) {
            this.complete.push(moment().valueOf())
          }
        },
        reset:function(){
          /* 初期化 */
          this.complete.splice(0,this.complete.length)
        },
        calc:function(){
          /* 計算 */
          var base = moment(this.time.base,'HH:mm:ss')
          var task = moment.duration(this.time.task)

          for(var i=0;i<this.rooms;i++){
            var val = base.add(task).valueOf()
            if(val){
              this.estimate[i] = val
            }
          }
        },
        init:function(){
          /* HH:MM:SSによる入力検証 */
          new Cleave(this.$refs.v1,this.validation)
          new Cleave(this.$refs.v2,this.validation)
        }
      },
      mounted:function(){
        this.time.base = '11:30:00' /* 作業開始 */
        this.time.task = '00:09:00' /* 作業時間 */
        this.init()       /* NN:NN:NNの入力検証 */
        this.calc()       /* 計算（作業完了時刻） */
      }
    }) 
 </script>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-21T22:26:52+09:00

HTML/CSS レスポンシブ対応個人的まとめ

概要

フロントトエンドの学習記録。
レスポンシブなレイアウトをCSSで実現する方法。
キーワードは以下の通り。

ビューポート

メディアクエリ

widthのパーセント指定

flex-box

ビューポート

htmlのheader内に、metaタグとして埋め込みを行う。
モバイルデバイス（スマートフォン・タブレットなど）用の設定で、レスポンシブデザインを適応する際に必要な端末情報を取得して埋め込む。
主に、後述するメディアクエリの判定基準に使用される。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
device-width: モバイル端末のCSSピクセル(コーディンする際の画面横幅)
※解像度には、CSSピクセル(HTMLコーディングで気にする) とデバイスピクスセル(画像で気にする)がある
例) iPhone X : CSSピクセル => 375 x 812 / デバイスピクセル => 1,125 x 2,436

initial-scale: ベージ表示時の初期拡大倍率
適切に、メディアクエリを用いてレスポンシブ対応する場合は1.0指定で概ね問題ない。
複数デバイスへの対応を力技で拡縮率だけで乗り切ろうとすると、1.0をjsでゴニョゴニョする必要もある、

なお、ビューポートは、CSS以外では、JavaScriptのwindow.innerWidth・innerHeightにも影響がある。

メディアクエリ

Media Queries

デバイスの画面サイズ別に、適応するCSSを変える(上書きする)などの場合に使用する、
@mediaで始まり、そのあとに、max-width か min-width　でCSSの適応の境界値を設定する。
境界値となる値は、 ブレークポイント と呼ぶ。
ブレークポイント前にメディタイプを挟むこともできる。
@media screen | tv | printer みたいな感じ。省略するとallになる。

なお、ブレークポイントの指定はどちらも境界値を含む。

‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to"　
https://www.w3.org/TR/css3-mediaqueries/#media1

以下に使用例を示す
@media (max-width: 1000px) {
/* 最大画面サイズが1000px "まで(x <= 1000)" 適応したいCSS定義 */
}

@media (min-width: 1000px) {
/* 最大画面サイズが1000px "から(x >= 1000)" 適応したいCSS定義 */ 
}

@media (min-width: 1000px) and (max-width: 1500px)  {
/* 最大画面サイズが1000〜1500px まで適応したいCSS定義 */
}
実践的な使い方
実践的には、 スマホ / タブレット / デスクトップPC の3つでブレークポイントを設定するケースが多い。
ブレークポイントを沢山設定し過ぎてもメンテナンスしにくいので、これくらいがちょうど良い。
どの値をブレークポイントとするかだが、昨今のスマホ画面サイズの大型化の流れなどで、変化してきているようだ。
その時の、有識者がまとめている定番の値を、ググって適応するのが良さそう。
雰囲気的には　400-600 | 800-1024 に境界値を設けているところが多そうだ。

一応、現時点での、個人的な設定を記載する。
デバイスが徐々に大型化(多様化)する流れを感じつつ、少し大きめなところで線を引いてみた。

3つに分けるケース
モバイルファーストで作成しつつタブレットやデスクトップPCにも、きっちり出し分け対応したい場合。
/* スマホ用 (<= 640px) */
@media (min-width: 640px) {
}

/* タブレット用 ( <= 1024) */
@media (min-width: 1024px) {
}
２つに分けるケース
デスクトップPCの画面をメインとして、タブレットやスマホなども最低限見える程度に対応したい場合。
※ iPad Pro11の縦使用をPCとみなしたい場合は834を境界値に。
/* スマホ/タブレット用 (<= 900px) */
@media (min-width: 900px) {
}
widthのパーセント指定

メディアクエリを使って、それぞれのブレークポイント別に、コンテンツの表示件数を変える場合には、
widthをパーセント指定する。

以下に想定するケースを書く
・スマホ表示時には１つだけ newsコンテンツを出す。
・タブレット表示時には２つ newsコンテンツを横並びで出す。
・デスクトップ表示時には4つ newsコンテンツを横並びで出す。

これをこうする。
.news {
  width: 25%;
}

/* スマホ用 (<= 640px) */
@media (min-width: 640px) {
  .news {
    width: 100%;
  }
}

/* タブレット用 ( <= 1024) */
@media (min-width: 1024px) {
  .news {
    width: 50%;
  }
}
box-sizing: border-box

調整をかけたいブロック要素に対して、paddingが設定された場合、
単純にパーセント指定だけだと厳しい局面がある。
なぜなら、paddingに対しては、パーセント計算が適応されないからである。
なので、画面サイズの小さい端末でみたときに、相対的に余白が大きく適応されて違和感が出てしまう。
また、floatで横並びレイアウトを組んでいた場合サイズが収まりきらなくて、箱落ちしてしまう。
これを防ぐために、 border-box 指定を使う。
* {
  box-sizing: border-box;
}
これにより、パーセント計算の時に、 余白も含めて(borderまで含めて） パーセント計算対象にしてくれるので、表示がいい感じに整う。
border-boxを使用しない場合は、旧来のcss内で、padding値を計算する方法もある。
なお、border-boxはmarginには適応されないので注意。

flex-box

フレキシブルにレイアウトを組むために入った仕組み。
レスポンシブデザイン向けの対応でよく用いられる。

使い方

親要素に display:flex (子要素がインライン要素の場合はinline-flex)と並べる指向性を宣言する

flex-direction:並べる方向 => [row| column]-[ | reverse] で4パターンから指定

flex-wrap:折り返しルール => [nowrap | wrap | wrap-reverse]から指定

flex-flow: direction/wrap記述のショートハンド => flex-flow: row wrap;

親要素にflexの全体での細かい動作適応設定を行う。(整列方法)

justify-content: 水平の整列ルール => [flex-start| flex-end | center | space-between | space-around]

align-items: 垂直の単一行整列ルール => [stretch | flex-start | flex-end | center | baseline]

align-content: 垂直の複数行整列ルール(wrap時) => justify-contentと同じ指定

子要素で、要素個々の適応設定を行う。

order: 順番を制御 => あくまでも見た目だけ(DOMの並びは変わらないのでjsで要素抜くときは注意)

flex-grow: 相対的な拡大率 => 他要素を１で、特定要素だけ２にすると表示上幅２倍の比率で表示されるになる

flex-shrink: 相対的な縮小率 => growの逆

flex-basis: 子要素のベースの幅 => [auto | 200px | 25%] などで指定。

flex: grow/shurink/basisのショートハンド => flex: 0 1 30%;

align-self: (親要素をからの)子要素の垂直表示揃え => [auto | stretch | flex-start | flex-end | center | baseline ]

具体例
parante: .container
child: .item　x N個
みたいな要素で構成されるマークアップ構造があったとする。
.container {
  display: flex;
  /** 子要素をrow/columnで並べ、reverseで順方向か逆方向かを指定。初期値はrow **/
  flex-direction: row-reverse;
}

.item1 { flex-grow: 2; }
.item2 { flex-grow: 3; }
.item3 { flex-grow: 1; }

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-21T22:26:52+09:00

HTML/CSS 個人的まとめ

概要

レスポンシブなレイアウトをCSSで実現する方法。
キーワード。

ビューポート

メディアクエリ

widthのパーセント指定

ビューポート

htmlのheader内に、metaタグとして埋め込みを行う。
モバイルデバイス（スマートフォン・タブレットなど）用の設定で、レスポンシブデザインを適応する際に必要な端末情報を取得して埋め込む。
主に、後述するメディアクエリの判定基準に使用される。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
device-width: モバイル端末のCSSピクセル(コーディンする際の画面横幅)
※解像度には、CSSピクセル(HTMLコーディングで気にする) とデバイスピクスセル(画像で気にする)がある
例) iPhone X : CSSピクセル => 375 x 812 / デバイスピクセル => 1,125 x 2,436

initial-scale: ベージ表示時の初期拡大倍率
適切に、メディアクエリを用いてレスポンシブ対応する場合は1.0指定で概ね問題ない。
複数デバイスへの対応を力技で拡縮率だけで乗り切ろうとすると、1.0をjsでゴニョゴニョする必要もある、

なお、ビューポートは、CSS以外では、JavaScriptのwindow.innerWidth・innerHeightにも影響がある。

メディアクエリ

Media Queries

デバイスの画面サイズ別に、適応するCSSを変える(上書きする)などの場合に使用する、
@mediaで始まり、そのあとに、max-width か min-width　でCSSの適応の境界値を設定する。
境界値となる値は、 ブレークポイント と呼ぶ。
ブレークポイント前にメディタイプを挟むこともできる。
@media screen | tv | printer みたいな感じ。省略するとallになる。

なお、ブレークポイントの指定はどちらも境界値を含む。

‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to"　
https://www.w3.org/TR/css3-mediaqueries/#media1

以下に使用例を示す
@media (max-width: 1000px) {
/* 最大画面サイズが1000px "まで(x <= 1000)" 適応したいCSS定義 */
}

@media (min-width: 1000px) {
/* 最大画面サイズが1000px "から(x >= 1000)" 適応したいCSS定義 */ 
}

@media (min-width: 1000px) and (max-width: 1500px)  {
/* 最大画面サイズが1000〜1500px まで適応したいCSS定義 */
}
実践的な使い方
実践的には、 スマホ / タブレット / デスクトップPC の3つでブレークポイントを設定するケースが多い。
ブレークポイントを沢山設定し過ぎてもメンテナンスしにくいので、これくらいがちょうど良い。
どの値をブレークポイントとするかだが、昨今のスマホ画面サイズの大型化の流れなどで、変化してきているようだ。
その時の、有識者がまとめている定番の値を、ググって適応するのが良さそう。
雰囲気的には　400-600 | 800-1024 に境界値を設けているところが多そうだ。

一応、現時点での、個人的な設定を記載する。
デバイスが徐々に大型化(多様化)する流れを感じつつ、少し大きめなところで線を引いてみた。

3つに分けるケース
モバイルファーストで作成しつつタブレットやデスクトップPCにも、きっちり出し分け対応したい場合。
/* スマホ用 (<= 640px) */
@media (min-width: 640px) {
}

/* タブレット用 ( <= 1024) */
@media (min-width: 1024px) {
}
２つに分けるケース
デスクトップPCの画面をメインとして、タブレットやスマホなども最低限見える程度に対応したい場合。
※ iPad Pro11の縦使用をPCとみなしたい場合は834を境界値に。
/* スマホ/タブレット用 (<= 900px) */
@media (min-width: 900px) {
}
widthのパーセント指定

メディアクエリを使って、それぞれのブレークポイント別に、コンテンツの表示件数を変える場合には、
widthをパーセント指定する。

以下に想定するケースを書く
・スマホ表示時には１つだけ newsコンテンツを出す。
・タブレット表示時には２つ newsコンテンツを横並びで出す。
・デスクトップ表示時には4つ newsコンテンツを横並びで出す。

これをこうする。
.news {
  width: 25%;
}

/* スマホ用 (<= 640px) */
@media (min-width: 640px) {
  .news {
    width: 100%;
  }
}

/* タブレット用 ( <= 1024) */
@media (min-width: 1024px) {
  .news {
    width: 50%;
  }
}
box-sizing: border-box

調整をかけたいブロック要素に対して、paddingが設定された場合、
単純にパーセント指定だけだと厳しい局面がある。
なぜなら、paddingに対しては、パーセント計算が適応されないからである。
なので、画面サイズの小さい端末でみたときに、相対的に余白が大きく適応されて違和感が出てしまう。
また、floatで横並びレイアウトを組んでいた場合サイズが収まりきらなくて、箱落ちしてしまう。
これを防ぐために、 border-box 指定を使う。
* {
  box-sizing: border-box;
}
これにより、パーセント計算の時に、 余白も含めて(borderまで含めて） パーセント計算対象にしてくれるので、表示がいい感じに整う。
border-boxを使用しない場合は、旧来のcss内で、padding値を計算する方法もある。
なお、border-boxはmarginには適応されないので注意。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-21T21:33:23+09:00

【初心者でもわかる】フォームの必須項目に（*）や（※）を付ける方法

どうも7noteです。必須項目と分かるように装飾を作る方法

今回はCSSで上付き文字を作ります。こんな感じです。

作り方
index.html
<p>お名前<span>※</span></p>
style.css
span{
  color: red;             /* 文字色を赤にする */
  font-size: 0.5em;       /* 文字サイズを半分にする */
  vertical-align: super;  /* 上付き文字にする */
}
上付きにしたい文字を<span>で囲み、vertical-align: super;で上に配置します。
vertical-alignはインライン要素にしか効かないので、注意が必要です。

<sup>は使うな！

似たようなことができる要素として<sup>というものがありますが、<sup>はその文字がないと意味が変ってしまうものにしか使わないというのが推奨の使い方になります。

たとえば、H²Oとか、E=mc²とかその文字が上付き文字でなくなってしまうと意味が変ってしまいます。
このような文字の場合にのみ<sup>を使います。

まとめ

勉強しはじめの頃、vertical-alignを使っていると上手く効いたり効かなかったリするので、必ずその要素がインライン要素かどうかを確認するよう注意してください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-21T15:47:32+09:00

font-awesomeとbootstrap(4.5.1)の導入

各種バージョン

Ruby: 2.6.5
Rails: 6.0.0
Bootstrap: 4.5.1
Font-Awesome(Free): 5.7.2

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>boot_and_fontawesome_app</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://kit.fontawesome.com/d9fcea61b7.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <%= yield %>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

上記を貼るだけ
以下はサンプルコード。

app/views/index.html.erb

<div class="container">
  <div class="jumbotron m-3">
    <h1 class="display-4">Hello, Bootstrap!</h1>
    <hr class="my-4">
    <p>This is the template of Ruby on Rails using Bootstrap.</p>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">
      <i class="far fa-window-maximize"></i>
      Click here
    </button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Hello!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

すると以下のようなページを表示できます。
https://gyazo.com/2c476830157ce55b86000591254edc33
ブートストラップとfont-awesomeが適用できていることがわかります。

参考　https://getbootstrap.jp/docs/4.5/getting-started/introduction/

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-21T12:39:35+09:00

(´ω｀) ... VueのTable {width,align}を一括指定するディレクティブつくりました

前回、DatGuiをBackEnd APIを検証するための登録画面に利用している。って記事を記載した。がだれからも良いねはなくLGTMも来なくて内心ビビってる。マジか。と思った。というかツイッターのフォロワーは未だ増えないままだ。この現状を見てInputMaskをぶっこんだ話なんかも展開する予定だったがやめた。そしてQiitaフォントサイズ大きいなってことで自分でブログを作ろうと思った。プロトタイプはあるし順調だ。だからその話もメモ代わりにQiitaで展開していくつもりだ。そこで動作するサンプルなんかも公開しよう。その間の記事はQiitaにメモ代わりで投稿することにした。

1.前提

趣味で何かを開発していたら、テーブルの列が後から増えてくる（登録する項目なんか）ってのはよくある話だ。少なくとも自分の間じゃそうだ。最初のプロトタイプを作るときは名前なんて姓だけで十分だしあとIDとPASSの３項目でテーブル作って社員登録機能を作る。みたいな最小限の構成で組み始めている。できた次に社員名いっとくか。メールアドレスいっとくか。みたいに項目を増やしていく。（機能が出来たら次のデータを作る。棚田だ）

2.問題

ここで起きてくる問題はCSSだ。今や<tag>の中にstyleをぶっこむなんて真似も全くしてこなかった俺だが、このような作り方の前では後から項目が増えるからID指定やCLASS指定でやろうと面倒くさくなってくる。nth-child(n)で最初は指定していたが列間の途中に項目を増やす状況になると、配列途中に値を挿入するみたいに以降の全番号を手で振りなおすという愚かさだ。面倒くさい（姓と名は左寄せのほうがいいな）
sample.css
table tr td:nth-child(1) { width:6em; text-align:center; }
table tr td.employee-name { width:6wm; text-align:center; }
table tr td#employee-name { width:6em; text-align:center; }
table tr td[data=employee_name] { width:6em; text-align:center; }
3.結局

タグの中に書き込んだ方が一番手っ取り早い。という結論に至った。周りはどうかな？どうやってるか知りたい。だが、なぜ毎回widthやtext-alignを打ち込まなくちゃならないんだ？面倒くさい。APIを検証するためのこの画面ではテーブルの項目は永遠と増え続ける。テーブル自体もだ。そのたびに書くのは面倒だ。その間の時間を省いてチロルチョコを食べた方がいい。健康的な考えだ。
sample.html
 <table>
   <tr>
     <td style='width:6em;text-align:center;'></td>
  </tr>
</table>
4.ということでディレクティブを作った

前置きが長かった。要はセルのtdのwidthとalignを{attribute:value}をvalueの一括指定でDOM作ってくれたら便利だなという話だ。ソースはこれ。
directive.vue
   Vue.directive('style',function(el,binding,vnode){
     vnode.context.$nextTick(function(){
       var arr = binding.value.split(',') 
       switch(binding.arg){
         case 'align':
           _.each(el.children,function(el,i){
             var align = arr[i] == 'l' ? 'left' : arr[i] == 'r' ? 'right' : 'center'
             el.classList.add(align)
           })
           break;
         case 'width':
           _.each(el.children,function(el,i){
             el.style.width = (arr[i] == undefined) ? 'auto' : arr[i] + 'em'
           })
           break;  
       }
     })
   })
5.使い方

ディレクティブをかますだけ。<tr>に。列の幅指定はヘッダだけで良く配置指定はボディに組み込んでいるが、確かにv-style:alignは効率的じゃないかもしれない。全セルに指定することになるからループも多い。ここだけCSSにした方がいいかも。どうやるのがベストだと思うか知りたい。ダブルクォートの間にシングルクォートを挟むのはこれ自体を文字列として評価してもらうためだ。

それからこのコードはLODASHに依存している。_.each()のとこだけだ。
sample.html
 <table>
   <thead>
     <tr v-style:width="'7,7,7,5,5,5,5,5,5,5,5,5,5,auto'">
    </tr>
  </thead>
   <tbody>
     <tr v-for='v,k,n in list' v-style:align="'c,l,l,c,c,c,c,c,c,c,c,c,c,c'">
    </tr>
  </tbody>
</table>

　 Tweet
Qiitaで続きを読む

20200921のCSSに関する記事は8件です。

Twitterクローンもどき作成までの過程

要素をきっちり3分割

画面サイズ取得

縦サイズ

横サイズ

画面サイズ変更の監視

入力ボックス

aの下線部を消す

Twitterのようなタイムラインの形のテンプレート

block要素を上下左中央に配置

フォーカスインとフォーカスアウト

気になったcssプロパティなど

flex-basis

::webkit-scrollbar プロパティ一覧

::-webkit-scrollbar

::-webkit-scrollbar-button

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

::-webkit-scrollbar-track-piece

::-webkit-scrollbar-corner

::-webkit-resizer

分かりやすいような分かりにくいようなサンプル

(´ω｀) わいが清掃のお仕事してた頃に作ったアプリってのがある

何をしてたか

何をしたいか

何を作ったか

何を使ったか

どう作ったか

HTML/CSS レスポンシブ対応 個人的まとめ

概要

ビューポート

メディアクエリ

widthのパーセント指定

flex-box

HTML/CSS 個人的まとめ

概要

ビューポート

メディアクエリ

widthのパーセント指定

【初心者でもわかる】フォームの必須項目に（*）や（※）を付ける方法

どうも7noteです。必須項目と分かるように装飾を作る方法

作り方

<sup>は使うな！

まとめ

おそまつ！

font-awesomeとbootstrap(4.5.1)の導入

各種バージョン

(´ω｀) ... VueのTable {width,align}を一括指定するディレクティブつくりました

1.前提

2.問題

3.結局

4.ということでディレクティブを作った

5.使い方

日付別

タグ一覧

`::-webkit-scrollbar`

`::-webkit-scrollbar-button`

`::-webkit-scrollbar-thumb`

`::-webkit-scrollbar-track`

`::-webkit-scrollbar-track-piece`

`::-webkit-scrollbar-corner`

`::-webkit-resizer`

HTML/CSS レスポンシブ対応個人的まとめ

`<sup>`は使うな！