サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
pcat.hatenablog.com
今回は、布地風ボックスをCSSで作る方法を紹介したいと思います。 まずはベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきたいと思います。 目次 目次 ベースコード 使い方 カスタムパターン 背景を赤系にしてみる 角丸表示にしてみる 青バージョン 赤バージョン 丸みマシマシバージョン まとめ ベースコード 早速ですが、布地風のボックスは以下のようなCSSで実現することができます。 .box.cloth { padding: 0.3rem 0.6rem; margin: 1.5rem 0; background: #a6c3e5; box-shadow: 0 0 0 8px #a6c3e5; border: 1.8px dashed #f1f1f1; } .box.cloth p { margin: 0; padding: 0; } 使い方 以下のようにスタイ
今回は、吹き出しデザインをCSSで作る方法を紹介したいと思います! 最初に、ベースとなるコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきたいと思います。 目次 ベースコード 使い方 カスタムパターン 吹き出しの色を変えてみる! 吹き出しの方向を変更してみる! 角丸表示にしてみる! 影付きの吹き出しを表示してみる! まとめ ベースコード 吹き出しデザインは以下のようなCSSで、実現することができます。 .speech-bubble { position: relative; display: inline-block; margin-bottom: 13px; padding: 1rem 1rem; min-width: 60px; max-width: 20rem; color: #929292; font-size: 16px; background: #d5f1a9;
Firebaseのドメイン変更が、とても簡単でちょっと感動したので、簡単にメモ残し 以下、デスクトップ&Chromeの場合。 (所要時間: 15秒~) Firebaseコンソールへ移動 対象のプロジェクトを開く サイドバーの中のHostingをクリック ドメインリストの中にある変更したいドメインをオーバーマウス 右に現れる縦並びの三点アイコンをクリック 表示されたドロップダウンから編集をクリック 「別のドメインにリダイレクトする」を選択 転送先ドメインを設定 完了をクリック 以上
今回は、付箋風ボタンをCSSで作る方法を紹介したいと思います! 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。 目次 目次 ベースコード 使い方 カスタムパターン 付箋の色を変えてみる! 角丸表示にしてみる! 影の度合いを調整してみる! 影薄めバージョン 影マシマシバージョン まとめ ベースコード 付箋風のボックスは以下のようなCSSで実現することができます。 .button.tag { display: inline-block; text-decoration: none; padding: 0.5rem; background: #f7f7f7; border-left: solid 6px #58ad5a; color: #58ad5a; font-weight: bold; box-shadow: 5px 5px 5px rgba
このページを最初にブックマークしてみませんか?
『pcat.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く