やりたいこと

Vuetifyに用意されているテーブルコンポーネント[v-data-table]がデフォルトのままだといまいち見づらかったので、
よくある奇数行だけ色が変わっている一覧にしたい

おなじみのCSSを設定してみる

普通にCSSで奇数行の色変わるように指定

App.vue

<style scoped>
.v-data-table td {
    background: #f0f8ff;
}
.v-data-table tr:nth-child(odd) td {
    background: #fff;
}
</style>

変わらない。。。
あぁ、scopedがついてるから子コンポーネントには反映されんのか。。。

App.vue

<style>
.v-data-table td {
    background: #f0f8ff;
}
.v-data-table tr:nth-child(odd) td {
    background: #fff;
}
</style>

変わった！
・・・けど、マウスオーバーしてる行の背景色が変わらなくなった。。。

tableのstyle上書きしてしまったから？
しょうがないから自分で設定してやる。

App.vue

<style>
.v-data-table td {
    background: #f0f8ff;
}
.v-data-table tr:nth-child(odd) td {
    background: #fff;
}
.v-data-table tr:hover td {
    background-color: #eee;
}
</style>

完成！

やりたいこと

aタグの中の文字がデフォルトで青色、アンダーラーンが設定されている。これらを変更したい。

解決するコードの書き方

a {
  color: black;
  text-decoration: none;
}

以上

どうも7noteです。HTMLソースをそのまま表示させる方法です。超簡単。

他の人にHTMLソースを使ってもらったり、HTMLソースを公開する時にHTMLタグのままテキストとして表示させる方法です。

やり方は超簡単

タグ（< >）を実体参照に置き換えるだけ。

• 「<」 ⇒ <
• 「>」 ⇒ >

実体参照とは？

<a href="hogehoge.com">ほげほげへリンク</a>

↓実体参照で置き換えると・・・

&lt;a href="hogehoge.com"&gt;ほげほげへリンク&lt;/a&gt;

結果
<a href="hogehoge.com">ほげほげへリンク</a>

これだけ。超簡単。

おそまつ！

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

概要

Bootstrap3では使えて、Bootstrap4では使えない機能は結構あります。
その時に参考するのがこちらのサイト。めちゃくちゃお世話になっています。

Bootstrap4移行ガイド

ですが、そこに書かれている記述のまま転記しても同等に利用できない事例もあったりするため、
そのようなものが発生した場合の解決をメモ代わりに利用しています。

なおscssで編集を行っています。

対象のクラス

btn-xs

Bootstrap4では消えました。
ですが、どうしても使いたいことは結構あります。
ほら、テーブルのボタンとか……ヘッダー右揃えで目立たないコンフィグボタンとか……。

そんなわけで、作ってしまいます

app.scss

$btn-padding-x-xs: .20rem !default;
$btn-padding-y-xs: .12rem !default;
$input-btn-line-height-xs: 1.1 !default;

.btn.btn-xs {
  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}

index.html

<button type="button" class="btn btn-xs btn-primary">めっちゃ小さいボタン</button>

なお.btn-xsのサイズはBootstrap3のマイナーバージョンの番号によって地味にサイズが異なるので、入れてみてから「なんか違うな」となったら変数を変更しましょう。

well

Bootstrap4ではこいつも消えました。
具体的には.card系と統合になったとのこと。
では.cardで統合してしまいましょう。

index.html

<div class="card card-body bg-light mb-3">
    wellの中身
</div>

と書きたいところですが、ちょっと待った！
実はこのように記述すると、ボタンやバッジを以下のように記述したとき、同等に表示されなくなります。

index.html

<div class="card card-body mb-3">
    <button type="button" class="btn btn-danger mb-3">なぜかブロックになってるボタン</button>
    <span class="badge badge-danger">なぜかめちゃくちゃ長いバッジ</span>
</div>

こんな感じになります↓

その理由としては、cardにはdisplay: flexが指定されており、card-body側でそれを打ち消す処理は特に入れていないから。
クラスの中身を編集しても構いませんが、面倒なのでdivの階層構造だけで対応してしまいましょう。

index.html

<div class="card bg-light mb-3">
    <div class="card-body">
        wellの中身
    </div>
</div>

なんか釈然としませんが、だいたい解決します。
ちなみにちょっとだけ色合いが違いますが、以下のように解決してもいいと思います。

index.html

<div class="alert alert-secondary">
    アラート<br>
    <button type="button" class="btn btn-primary">アラート内ボタン</button>
</div>

ボタンなども問題なく描画されます。

bs-callout

これはbootstrap3にも4にもそもそも収録されていないやつですが、
Bootstrap公式サイトでtipsなどに利用されているクラスの再現です。

app.scss

.bd-callout {
  padding: $card-spacer-x;
  margin-top: $card-spacer-x;
  margin-bottom: $card-spacer-x;
  border: $card-border-width solid $card-border-color;
  border-left-width: .25rem;
  border-radius: $card-border-radius;
  background-color: $white;
  h2,h3,h4,h5 {
    margin-top: 0;
    margin-bottom: .25rem
  }
  p:last-child {
    margin-bottom: 0
  }
  code {
    border-radius: $border-radius;
  }
}

.bd-callout-primary{
  border-left-color: $primary;
  h2,h3,h4,h5 {
    color: $primary
  }
}

.bd-callout-secondary{
  border-left-color: $secondary;
  h2,h3,h4,h5 {
    color: $secondary
  }
}
.bd-callout-success {
  border-left-color: $success;
  h2,h3,h4,h5 {
    color: $success
  }
}
.bd-callout-info {
  border-left-color: $info;
  h2,h3,h4,h5 {
    color: $info
  }
}
.bd-callout-warning {
  border-left-color: $warning;
  h2,h3,h4,h5 {
    color: $warning
  }
}
.bd-callout-danger {
  border-left-color:$danger;
  h2,h3,h4,h5 {
    color: $danger
  }
}
.bd-callout-light {
  border-left-color: $light;
  h2,h3,h4,h5 {
    color: $light
  }
}
.bd-callout-dark {
  border-left-color: $dark;
  h2,h3,h4,h5 {
    color: $dark
  }
}

$whiteは公式の変数宣言ではなく自分で必要に迫られて書いた気がしますが、覚えてないのでこのまま。
エラーが出たら宣言してあげてください。

なにか発生するたびに増える予定...