HTML/CSS

HTML/CSS フロントサイド

メガナビゲーションの作り方

2020/5/26    ,

どうも、シローです。 今回はメガナビゲーションの作り方についてまとめました。 メガナビゲーションとは メガナビゲーションとはマウスでカーソルを合わせたときに、下にさらに要素が表示される、ちょっと凝った ...

HTML/CSS フロントサイド

ナビゲーションメニューの作り方

2020/5/26    ,

どうも、シローです。 Webサイトで必ずといってあるナビゲーションメニューの作り方を今回はまとめようと思います。 ヘッダーナビゲーションの作り方 ヘッダーナビゲーションはサイトの上の方に横一列で配置さ ...

HTML/CSS フロントサイド

CSS,PNG,SVGなどで様々なボタンを作る

2020/5/26    

どうもシローです。 今回は、UIの要素であるボタンを色々な方法で作成してみようと思います。 CSSのみで作成する シンプルにCSSのみで作成する方法です。 擬似要素:hover, activeを使って ...

HTML/CSS フロントサイド

レスポンシブ対応の書き方

2020/5/26    ,

WebサイトをPC用とスマホ用でレイアウトを別々にするときの僕なりの方法をまとめます。 HTML内にPC用、SP用のDOMを構築 以下のように、PC用のDOMとSP用のDOMを用意します。 [cray ...

HTML/CSS フロントサイド

[CSS]:vertical-alignについて

2020/5/26    ,

vertical-alignは主にインラインボックス内で画像の高さを文字の高さに合わせたり、 テーブル内の文字の位置を調整するために使われる。 テーブルのサンプルコード   HTML [cr ...

© 2021 Shiro's secret base