skillup

技術ブログ

UI デザイン

boostrapでのヘッダーナビ作成

投稿日:

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。

実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していましたが、今はbootstrapを使うときれいなサイトが少ない工数で組めるようになっていますね。

例えば下記のようなヘッダーナビ&ドロップダウン形式のメニューですが、bootstrapを使うと簡単に実装できます。

hoge

ソース

 

-UI, デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

css animationの使い方

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5ada7ad79c …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …