html css: レスポンシブなサイトを作りたい・綺麗なcssの書き方について

Question

railsアプリでレスポンシブに対応させたい。

練習でダッシュボードを作っています。
勉強しながらなんとかレイアウトまでは作ることができたのすがcssがあまり美しくないかなって感じています。

実現したいこと

cssのコードをプロっぽい感じにしたい。（自分で見返してもコードの汚ないと思うため）
レスポンシブに対応させたい。（少しはわかるがよく理解までは出来ていない。）
リストボックス内の各項目にカーソルを合わせると色が変わるようにしたい（先頭に固定するまではなんとかできました。）

以上を踏まえ、何かアドバイスと、cssに関してはプロっぽいサンプルをご教授して頂けると嬉しいです。

<header>
	<h2>ダッシュボードを作りたい</h2>
	<nav>
		<ul>
			<li><p>Swift</P></li>
			<li><p>rails</p></li>
			<li><p>漫画</p></li>
		</ul>
	</nav>
</header>

<div class="wrapper">
<ul class="dashboard">
  <li>ドロップダウン</li>
  <li>プロフィール</li>
  <li>予約チケット</li>
  <li>スケジュール</li>
  <li>売上管理</li>
</ul>
<div class="content"></div>
</div>

header {
  position: fixed;
  top: 0px;
  left: 0px;
    height: 100px; /*ヘッダーの高さ*/
    width: 100%; /*ヘッダーの横幅*/
    background-color: #1d2731; /*ヘッダーの背景色*/
    color: white; /*ヘッダーの文字の色*/
}

header p {
    line-height: 100px; /*行の高さ*/
    float: left; /*左に流す*/
    font-size: 15px; /*文字の大きさ*/
    margin-right: 10px; /*左にマージンを取っている*/
}

header h2 {
    line-height: 40px; /*行の高さ*/
    float: left; /*左に流す*/
    font-size: 30px; /*文字の大きさ*/
    margin-left: 20px; /*左にマージンを取っている*/
}
header nav {
    float: left; /*左に流す*/
    margin-left: 500px; /*左にマージンを取っている*/
}

header li {
    line-height: 100px; /*行の高さ*/
    float: left; /*左に流す*/
    margin-left: 30px; /*li間の幅を開くために左にマージンを取っている*/
    list-style: none; /*デフォルトでついているliの黒点をnoneにしている*/
}

.wrapper {
  position:fixed;
  top:0;
  left:0;
  height:100%;
  margin-top:35px;
  display:flex;
}
.dashboard {
  /* position: fixed; 削除*/
  left: 0px;
  width:200px;
  height: 100%; /*ページいっぱい伸ばしたい*/
  padding: 0px;
  margin-top: 65px;
  border-top: 0px;
  border: 1px solid #bbd;
  background-color: #3c4a58;
}
.dashboard li{
  list-style: none;
  background: #3c4a58;
  color: white;
  border-top: 1px solid #ccc;
  padding: 10px 20px;
  text-align: center;
}

.dashboard li:first-child {
  background-color: #36c;
  color: white;
  border-radius: 5px 5px 0px 0px;
}

.content {
  margin: 65px 0 50px 0; /* 変更 */
  width: 1240px;
  height: 645px;
  background-color: #ccf2ff;
}

Answer 1

cssがあまり美しくないかなって感じています。

そう思う所を改善して行けば良いのでは？
まずは、HTMLやCSSのコードにキチンと統一したインデントで記述すると良いかと思います。

---

プロっぽい感じ

コーディングは「十人十色」的な部分もあるので、これが「プロ」ってのは無いと思います。SEOにも絡みますが、無駄なコード記述を無くして行けば自然とそう見えてくるかと思います。

Answer 2

おそらくあまり理解していない状態でレスポンシブを組むのは至難であると思います。
「プロっぽい感じのコードにしたい」と仰いますが、実際の現場のほとんどではレスポンシブ対応のCSSフレームワークが導入されており、そのフレームワークを基盤に独自の作りを載せています。
多少学習コストはかかるもののフレームワークのお作法に則って組めばレスポンシブにも即座になりますし、コンポーネントも豊富できちんと理解すればそのフレームワークっぽい色をなくして自分の色を出すこともできます。
サーバーサイドであるPHPにもフレームワークはありますが中にはデフォルトでクライアントサイドであるCSSのフレームワークが導入されるものもあるくらいです。

ご参考まで。

Comments

[m.ts10806]

完全導入まではいかなくても
フレームワークのソースを読めばレスポンシブの理解にもつながります。
それこそ一番の「プロっぽいサンプル」ですね。

Answer 3

カーソル合わせによるリスト内の色変更については、"li:hover{ }"で実現可能です。