【CSS】テキスト(見出し，タイトル)に横線をつける方法
HTMLのコーディングで必要になり，ちょっと調べたので備忘録． 見出しなどの文字列の両側(両端，左右)に横線(ハイフン・横棒)をつけて，中央にもっていきたい場合がある． - を使うと ------ のように切れ切れになってしまう． CSS の書き方 そこで css を使って行う方法を紹介します．(サンプルコード) HTML は <div class="catch"> 見出し </div> CSS は .catch { display: flex; align-items: center; /* 垂直中心 */ justify-content: center; /* 水平中心 */ } .catch:before, .catch:after { border-top: 1px solid; content: ""; width: 3em; /* 線の長さ */ } .catch:before
【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
開発者ツールでスマホモードにしてみてもらってもいい． スマホで見やすい項目固定の横スクロールテーブル解説 以下では 630px をブレイクポイントとしてスマホモードに移行している． そのブレイクポイントを超えて狭まった時にテーブルが収まらないという値にする必要がある． 考え方としてはテーブルを div で括り，スマホではそれを overflow: auto; (scrollとほぼ同じ意味)にし，全体を margin-left で右にずらす． 最初の左端項目列だけ位置を左端にposition: absolute; で固定する． 要は基本的にはみ出た部分はスクロールするようにするが，左端の項目名だけは左端に固定した表示にして動かないようにする．他の部分に関しては margin-left で左端の項目の幅分だけ右にずらすということをしているだけ． 以下にサンプルコードを書くので参考にしてください
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
