CSSでcontenteditable要素の境界線（枠線）を削除する方法
HTMLのcontenteditable属性を指定した要素は、ブラウザ上で直接テキストを編集できます。しかし、要素をクリックして編集モードにすると、多くのブラウザではデフォルトで青い枠線（アウトライン）が自動的に表示されます。
この境界線を非表示にしたい場合は、CSSのoutlineプロパティを使用します。[contenteditable]セレクターに対してoutline: 0px solid transparent;を指定することで、編集時の枠線をきれいに取り除くことができます。
コード例
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
p{
font-size: 40px;
}
[contenteditable] {
outline: 0px solid transparent;
}
</style>
</head>
<body>
<h1>Remove Contenteditable Border Example</h1>
<p contenteditable="true">This is a contenteditable paragraph which you can edit</p>
</body>
</html>出力結果
上記のコードを実行すると、次のような画面が表示されます。
段落をクリックすると、下のスクリーンショットのようにテキストを直接編集できる状態になります。通常であればここに青い枠線が表示されますが、outlineプロパティを無効化しているため、枠線なしでスッキリとした見た目のまま編集が可能です。
ポイント解説
- outlineプロパティ： 編集可能要素に表示される枠線の正体はborderではなくoutlineです。そのため
border: none;では消えず、outlineを操作する必要があります。 - 透明色の指定：
0px solid transparentとすることで、幅・スタイル・色のすべてを無効化し、確実に枠線を非表示にできます。 - ユーザビリティへの配慮： 枠線を削除すると編集可能かどうかが視覚的に分かりにくくなるため、ホバー時に背景色を変えるなどの工夫を加えると使いやすくなります。
-
CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説
Web制作において、画像・動画・カード型レイアウトなどで要素の縦横比（アスペクト比）を固定したい場面は非常に多くあります。ウィンドウサイズが変わってもレイアウトが崩れないようにするには、CSSの工夫が必要です。 基本の考え方：padding-topを使った手法 最も広く知られているのが「padding-top」を活用したテクニックです。paddingのパーセント指定は親要素の幅を基準に計算されるため、これを利用して高さを幅に連動させることができます。 例えば4:3の比率を維持したい場合は、padding-topに「75%」（3÷4×100）を指定します。同様に16:9なら「56.25%」、正方
-
CSSでcontenteditable要素の境界線（枠線）を削除する方法
HTMLのcontenteditable属性を指定した要素は、ブラウザ上で直接テキストを編集できます。しかし、要素をクリックして編集モードにすると、多くのブラウザではデフォルトで青い枠線（アウトライン）が自動的に表示されます。この境界線を非表示にしたい場合は、CSSのoutlineプロパティを使用します。[contenteditable]セレクターに対してoutline: 0px solid transparent;を指定することで、編集時の枠線をきれいに取り除くことができます。コード例<!DOCTYPE html> <html> <head> <st