Vue.js：CSSについて

・技術要素　Vue.js
・初期表示でApp.vueが表示されます。
App.vue構成はヘッダー　メニューバー領域・ダッシュボード領域です。

・ヘッダー領域は左側にはダッシュボードの文字が　右側には・アイコン　文字列　アイコン　文字列　アイコン　文字列
メニューバー領域は　画像　説明文字列　　アイコン　文字列　アイコン　文字列　アイコン　文字列　となっています。
いい感じになるようにCSS考えてください。

簡単なコード例を示してください。
```javascript
<template>
  <div class="app-container">
    <header class="header">
      <div class="header-left">
        <span class="dashboard-text">Dashboard</span>
      </div>
      <div class="header-right">
        <i class="icon"></i>
        <span class="text">Text 1</span>
        <i class="icon"></i>
        <span class="text">Text 2</span>
        <i class="icon"></i>
        <span class="text">Text 3</span>
      </div>
    </header>
    <div class="menu-bar">
      <img class="menu-image" src="image.png" alt="menu image">
      <span class="menu-description">Menu Description</span>
      <i class="menu-icon"></i>
      <span class="menu-text">Text 1</span>
      <i class="menu-icon"></i>
      <span class="menu-text">Text 2</span>
      <i class="menu-icon"></i>
      <span class="menu-text">Text 3</span>
    </div>
    <div class="dashboard">
      <!-- Dashboard content goes here -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
  // Component logic goes here
}
</script>

<style scoped>
.app-container {
  /* Add app container styles here */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Add header styles here */
}

.header-left {
  /* Add header left styles here */
}

.dashboard-text {
  /* Add dashboard text styles here */
}

.header-right {
  display: flex;
  align-items: center;
  /* Add header right styles here */
}

.icon {
  /* Add icon styles here */
}

.text {
  /* Add text styles here */
}

.menu-bar {
  display: flex;
  align-items: center;
  /* Add menu bar styles here */
}

.menu-image {
  /* Add menu image styles here */
}

.menu-description {
  /* Add menu description styles here */
}

.menu-icon {
  /* Add menu icon styles here */
}

.menu-text {
  /* Add menu text styles here */
}

.dashboard {
  /* Add dashboard styles here */
}
</style>

```


CSSのやり方でアイコンと文字列があります。
アイコンと文字列はDIVでくくっています。
アイコンと文字列はDIVの中心で揃えてあります。
```javascript
.icon-and-text {
  display: flex; /* フレックスコンテナにする */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
}
```




技術要素　Vue 
・初期表示でApp.vueが表示されます。
App.vue構成はヘッダー領域　コンテンツ領域です。
・今回はCSSに関して伺いたいです。
ヘッダー領域は　文字列　　アイコン　文字列　アイコン　文字列 アイコン　文字列となっています。
アイコン　文字列がいい感じになるようにCSSを考えてください。

簡単なコード例を示してください
以下は、Vue.jsでヘッダー領域のアイコンと文字列を装飾するための簡単なCSSコードの例です。この例では、アイコンと文字列を横並びに配置し、アイコンと文字列の間にスペースを追加することで、デザインを改善しています
```javascript
/* ヘッダー領域のスタイル */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f0f0f0;
}

/* アイコンのスタイル */
.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-image: url('path/to/icon.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* テキストのスタイル */
.text {
  display: inline-block;
  font-size: 16px;
  color: #333;
}
```
上記のコードを使用すると、以下のようなHTMLを使用してヘッダー領域を作成できます。
```j
html

<template>
  <div class="header">
    <div>
      <span class="icon"></span>
      <span class="text">アイコン1</span>
    </div>
    <div>
      <span class="icon"></span>
      <span class="text">アイコン2</span>
    </div>
    <div>
      <span class="icon"></span>
      <span class="text">アイコン3</span>
    </div>
  </div>
</template>

```




```javascript
App.vue
<template>
  <div class="app">
    <Header />
    <MenuBar />
    <Dashboard />
  </div>
</template>
<script>
import Header from './views/Header.vue'
import MenuBar from './views/MenuBar.vue'
import Dashboard from './views/Dashboard.vue'

export default {
  components: {
    Header,
    MenuBar,
    Dashboard
  }
}
</script>
<style>
.app {
  /* 画面全体にフルスクリーンで表示する */

  /* レイアウト */
  display: flex;
  flex-direction: column;

  /* 背景色 */
  background-color: #f5f5f5;
}

/* ヘッダー領域 */
.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
}

.header .dashboard-title {
  font-size: 24px;
  font-weight: bold;
}

.header .icons {
  display: flex;
  align-items: center;
}

.header .icons img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.header .icons .text {
  font-size: 16px;
  margin-right: 20px;
}

/* メニューバー領域 */
.menu-bar {
  display: flex;
  padding: 10px;
  background-color: #fff;
}

.menu-bar .image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.menu-bar .description {
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
}

.menu-bar .icons {
  display: flex;
  align-items: center;
}

.menu-bar .icons img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.menu-bar .icons .text {
  font-size: 16px;
  margin-right: 20px;
}
</style>

Header.vue
<template>
    <!-- Header Start -->
    <header class="site-header">
      <div class="wrapper site-header__wrapper">
        <span class="brand">Brand</span>
        <nav class="nav">
          <ul class="nav__wrapper">
            <li class="nav__item">
                <a href="#"><img src="../menu-item-image.png" alt="menu item image"><span class="nav-item-text">Header Item 1</span></a>
            </li>
            <li>
              <div class="nav__item">
                <a href="#"><img src="../menu-item-image.png" alt="menu item image"><span class="nav-item-text">Header Item 2</span></a>
              </div>
            </li>
            <li>
              <div class="nav__item">
                <a href="#"><img src="../menu-item-image.png" alt="menu item image"><span class="nav-item-text">Header Item 3</span></a>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </header>
</template>
<style>
/* 
** The Header Media Queries **
** Tweak as per your needs **
*/
ul {
  list-style: none;
}
.brand {
  font-weight: bold;
  font-size: 20px; }
 
.site-header {
  position: relative;
  background-color: #def7ff; }
 
.site-header__wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem; }
  @media (min-width: 600px) {
    .site-header__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0;
      padding-bottom: 0; } }
@media (min-width: 600px) {
  .nav__wrapper {
    display: flex; } }
 
@media (max-width: 599px) {
  .nav__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
    background-color: #d9f0f7;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav__wrapper.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0); } }

.nav-item {
  display: flex;
  align-items: center;
  padding: 1em;
}
 
.nav__item a {
  display: block;
  padding: 1.5rem 1rem; }

.nav__item img {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
.nav-item-text {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
}

.icon-menu {
  font-size: 16px;
  color: #999;
}
</style>

MenuBar.vue
<template>
    <nav class="sidebar">
      <div class="menu-item">
        <img src="../menu-item-image.png" alt="menu item image">
        <span class="menu-item-text">Menu Item 1</span>
      </div>
      <div class="menu-item">
        <img src="../menu-item-image.png" alt="menu item image">
        <span class="menu-item-text">Menu Item 2</span>
      </div>
      <div class="menu-item">
        <img src="../menu-item-image.png" alt="menu item image">
        <span class="menu-item-text">Menu Item 3</span>
      </div>
    </nav>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.sidebar {
  width: 300px;
  background-color: #f7f7f7;
  padding: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.menu-item img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.menu-item-text {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
}

.icon-menu {
  font-size: 16px;
  color: #999;
}
</style>
Dashboard.vue
<template>
  <div class="Dashboard">
    <h1>This is an Dashboard page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .Dashboard {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
```
◼︎参考リンク
https://skillhub.jp/blogs/256