LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@JoeB(ジーナ)

Vue.js：CSSについて

Last updated at Posted at 2023-04-23

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

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

簡単なコード例を示してください。

<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の中心で揃えてあります。

.icon-and-text {
  display: flex; /* フレックスコンテナにする */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
}

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

簡単なコード例を示してください
以下は、Vue.jsでヘッダー領域のアイコンと文字列を装飾するための簡単なCSSコードの例です。この例では、アイコンと文字列を横並びに配置し、アイコンと文字列の間にスペースを追加することで、デザインを改善しています

/* ヘッダー領域のスタイル */
.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を使用してヘッダー領域を作成できます。

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>


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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?