HTMLとCSS

開発中に調べたこと

tableタグは表を作るタグであり、レイアウト用に使うタグではないからです。
htmlのdivとtableの役割

• DIV TABLE生成サイト

htmlだけで横並びできるため簡易的な横並びのときに使用する。

• HTMLが全て読み込まれるまで表示されない
• メンテナンスが難しくなりがち
• SEO観点からみると弱い

• 【CSS】display:tableの書き方、使い所を初心者にもわかりやすく解説
• CSS Table displayについて見直してみる
• 【HTML】基本中の基本”Div”タグについて。Divでテーブルを作る方法なども具体的に解説
• 【CSS】display:tableを使ってdivで表を作る方法
• [HTML] tableタグを使うメリット・デメリットとdlタグを使った表の作り方
• ホームページのレイアウトはテーブルではなくCSSを使う理由

div.container {
    display: flex;
    justify-content: center;
    position: relative;
}
 
.btn-left {
    position: absolute;
    left: 0;
}
 
.btn-right {
    position: absolute;
    right: 0;
}

<div class="container mb-3">
    <BSButton Color="BSColor.Warning" Class="btn-labeled btn-left" OnClick="OnWorkEnd">
        <span class="btn-label"><i class="bi bi-skip-start-fill"></i></span>作業終了
    </BSButton>
 
    <BSButton Color="BSColor.Success" Class="btn-labeled btn-right">
        <span class="btn-label"><i class="bi bi-skip-end-fill"></i></span>強制開始
    </BSButton>
</div>

• display:flex;で横並びにした要素を中央と右寄せで配置する方法
• 同じ行に中央寄せと右寄せを混在させたい…！(CSS)

title 属性を使う。

<option title="北海道">ラベンダー</option>

• プルダウン/セレクトボックスでoptionタグにマウスオーバーした際にテキスト表示したい

履歴一覧のヘッダーの右端にゴミ箱アイコンを表示する。

.trash {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    cursor: pointer;
    position: absolute;
    top: 7%;
    left: 92%;
}

<div class="trash text-danger" title="履歴削除">
    <i class="bi bi-trash"></i>
</div>

【HTML・CSS】画像の上に画像や文字を重ねる方法

２つのテーブルの真ん中に縦線を引く

.wrap {
    display: flex;
}
 
.line {
    width: 2px;
    background-color: lightgray;
    height: 185px;
}

A DIVテーブル
<div class="line mx-3"></div>
B DIVテーブル

CSSで２つの要素の真ん中に縦線を引く方法を解説！