HTML/CSS入門 Gridで重なりを表現してみよう
CSS Gridを使って要素の重なりを表現してみます。
以下のような感じです。
少しわかりづらいですが、ピンクの要素の下部に黒の要素が重なっています。ピンクが画像、その画像の説明が入ります。
完成形 ...
HTML/CSS Flexではみ出した時は flex-wrap: wrap を指定しよう
以下のようにFlexで横並びにしていたとします。
<div class="flex"> <div>apple</div> <div>banana</div ...
ローカルでWebサーバーを起動するとても簡単な方法
初めてHTML/CSSでサンプルを作成したけど、それを動かすWebサーバーの構築でつまづいてしまったというケースは多いと思う。
そんな時は Chrome 拡張の Web Server for Chrome でとても簡単にW ...
CSS 擬似要素をつかってborderの二重線を引く
以下のようなHTML/CSSがある。
<div class="test">test</div>.test { position: relative; margin: 5px; padd ...
ボタンを押せる範囲を広げてユーザーエクスペリエンスをあげる
ボタンの見た目は変えずに、ボタンを押せる領域を広げる場合には、background-clip を利用すると便利。
<button class="btn"> button </button&g ...
CSSだけでスムーズなスクロールを実装する方法
scroll-behaviorプロパティーにsmoothを指定します。
html { scroll-behavior: smooth;}2020/04/25時点ではIEとSafariが対応していないようです。
二番目以降のliにのみスタイルを適用したい場合
以下のようなHTMLがあり、二番目以降のliにのみmargin-top:5px;を入れたい場合。
<ul><li>line1</li><li>line2</li>< ...
Safariでinputのplaceholderが上にずれる問題
問題
inputタグのplaceholderの文字がSafariだけ上にずれてしまう。
解決方法「input placeholder safari ずれる」などで検索します。
inputに対して、line-hei ...
HTML の DOCTYPE について
DOCTYPE とは
DOCTYPE は、HTML ファイルの先頭に記載します。
HTML5 の場合、以下です。
HTML4.01(HTML 4.01 Transitional) の場合、以下です。
...