上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。すべてのモダンブラウザでベンダープレフィックスなしで動作します。 ▼ CSS .container { display: flex; justify-content: center; align-items: center; } ▼ 画像をウインドウの上下中央に配置
枠の上に文字を乗せるやり方 - Qiita
<div class="area"> <div class="area__label">ラベル</div> <div class="area__content">コンテンツ</div> </div> .area { position: relative; width: 300px; height: 100px; border: solid 1px #f00; border-radius: 5px; background-color: #fee; &__label { position: absolute; top: 0; left: 20px; font-weight: 600; padding: 0 10px; // paddingを左右にいれて消す線の長さを延ばす transform: translateY(-50%); &::before { position: absolute;
Web魚拓が作られた時に、魚拓内容を書き換え強制リダイレクトする - Qiita
Web魚拓超怖い。元ネタ削除前に魚拓されると、ずっと残り続けます。今年に入っても某退職エントリとか...サイトミラーリングの対策を実行されたこちらのエントリをより汎用的にしたコードです。ドメイン名が異なると非表示になるためミラーサイト対策にもなります。 魚拓元のサイト http://subc.github.io/gyotaku/ Web魚拓結果 魚拓しましたがコンテンツが非表示になっていてます。 http://megalodon.jp/2015-1102-1443-25/subc.github.io/gyotaku/ ソースコード // ホストネームに含まれる文字列 host_name = 'github.io'; // コピーされたときのredirect先 redirect_deny_url = 'http://megalodon.jp/'; redirect_millisec = 50
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
