サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
pa-tu.work
エディタを使用していてよく使う機能の一つのdiff 通常は保存済みのファイル同士で差分を比較しますが、特定の文字列だけを比較したくなることもありますよね。 そんな時に便利な方法が以下になります。 VSCodeの標準機能で文字列で比較する方法新規に2つのファイルを作成する新規に2つのファイルを作成し、比較元、比較先の文字列をそれぞれのファイルに書き込みます。 文字列の比較設定を行う エクスプローラーを開き、未保存の2つのファイルを選択肢、右クリック「選択項目の比較」を選択します。 文字列の比較が行われます。 文字列比較を簡単にする拡張機能以下の拡張機能を入れるとファイル内での文字列比較が可能になります。 Partial Diff 上記のように比較結果を表示する画面は通常と同じ横並びで表示され、異なる箇所がハイライト表示されます。 他にもクリップボード内にあるテキストと比較できる機能もありとて
CSSで作る吹き出しの見出しデザインを作りました。 before、after疑似要素で「border」プロパティ等を使用し吹出口を作っています。 三角の吹出口だけではなく、線を入れただけのシンプルな吹き出しや背景をストライプにしたものなど様々なパターンで作成しています。 <h2>CSSでつくる見出しデザイン</h2> h2 { position: relative; padding: 0.8rem 0; margin-bottom: 0.2rem; border-bottom: 5px solid; color: black; font-weight: bold; font-size: 26px; text-align: center; } h2:before, h2:after { position: absolute; top: 100%; left: 50%; content: ""
WEBパーツをHTML・CSSでカスタマイズしてコピペできるサービス。WEB制作やブログ・SNSで活用できます。
h2セレクタに「border-radius」を指定し、丸枠にします。before、after疑似要素で幅3rem、高さ0.2remにして垂直方向の配置を中央に。「before」で左位置、「after」で右の位置を調整しています。 h2 { position: relative; padding: 1rem; border-radius: 2rem; background: #212121; color: white; font-weight: bold; font-size: 22px; } h2:before, h2:after { position: absolute; top: 49%; width: 3rem; height: 0.2rem; background-color: black; content: ''; } h2:before { left: -3rem; } h2:
CSSで下線を引いた見出しを34個、実装しました。 実線を引いただけのデザインから、ストライプや線の一部だけ色を変えたもの、グラデーションをかけたものなど様々なパターンで装飾しています。 気に入った見出しがあればコピペしてブログやホームページなどでご活用ください。
このページを最初にブックマークしてみませんか?
『Pa-Tu | WEBパーツをカスタマイズしてコピペできる』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く