www.youtube.com これをやってみました。モーダルの作り方はなんとなく知っていたが、モーダルのコンテンツが一瞬大きくなる方法が知れたのがよかった。 scale() プロパティの名前からして挙動が推測できるが、これを使用すると拡張と縮小を制御できる。 tra…

やること セレクトボックスをCSSでスタイリングする 初めに すでに出来合いのセレクトボックスを利用することが多いので自分でちゃんとやったことなかったなーと思い、セレクトボックスのスタイリングをしてみました。 めちゃくちゃ基本的なHTMLとCSSしか使…

first-childが効かない時の対処方法。 first-childが効かない例 例えば以下のようなHTML構造になっている場合、 <div class="myClass"> <h1>title</h1> <p>hoge</p> <p>hoge</p> <p>hoge</p> </div> 以下のようなCSSは適用されません。 .myClass p:first-child { background-color: red; } これは、myClassの最初の子要…

JavaScriptとCSSを使って、モーダルウィンドウを作成します。 実現方法は至って単純で、なんらかのボタンが押されたらモーダルのdisplay属性をnoneにしたりblockにしたりするだけです。 .modal { display: none; position: fixed; z-index: 1; left: 0; top:…

結論 inputタグをdivタグなどで囲む。 その上で、divタグに対してtext-align:centerを指定する。 .center { text-align:center; } <div class='center'> <input type='text'></input> </div> 成り行き input要素に直接text-align:centerを指定しても効かなかったため。 （以下のCSSではテキストボックスが親要素に…

CSSで背景色などの色を指定する方法がいろいろあるため、まとめました。 以下、４種類の方法を記載していますが、全て同じ色となります。 色名を指定する 16進数で指定する rgbで指定する hslで指定する 色名を指定する .button1 { background: aqua; } CSS…