HTML/CSS, プログラミング入門

CSS Gridを使って要素の重なりを表現してみます。

以下のような感じです。

少しわかりづらいですが、ピンクの要素の下部に黒の要素が重なっています。ピンクが画像、その画像の説明が入ります。

完成形 ...

HTML/CSS, プログラミング入門

以下のようにFlexで横並びにしていたとします。

<div class="flex"> <div>apple</div> <div>banana</div ...

HTML/CSS

初めてHTML/CSSでサンプルを作成したけど、それを動かすWebサーバーの構築でつまづいてしまったというケースは多いと思う。

そんな時は Chrome 拡張の Web Server for Chrome でとても簡単にW ...

HTML/CSS

以下のようなHTML/CSSがある。

<div class="test">test</div>.test { position: relative; margin: 5px; padd ...

HTML/CSS

ボタンの見た目は変えずに、ボタンを押せる領域を広げる場合には、background-clip を利用すると便利。

<button class="btn"> button </button&g ...

HTML/CSS

scroll-behaviorプロパティーにsmoothを指定します。

html { scroll-behavior: smooth;}

2020/04/25時点ではIEとSafariが対応していないようです。

HTML/CSS

以下のようなHTMLがあり、二番目以降のliにのみmargin-top:5px;を入れたい場合。

<ul><li>line1</li><li>line2</li>< ...

HTML/CSS, 未分類

問題

inputタグのplaceholderの文字がSafariだけ上にずれてしまう。

解決方法

「input placeholder safari ずれる」などで検索します。

inputに対して、line-hei ...

HTML/CSS

DOCTYPE とは

DOCTYPE は、HTML ファイルの先頭に記載します。

HTML5 の場合、以下です。

HTML4.01(HTML 4.01 Transitional) の場合、以下です。

...