質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

87.61%

ヘッダーの右寄せができない・隙間が空いてしまう

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 41
iiinnn

score 3

前提・実現したいこと

![イメージ説明
ATOMエディタでHTML CSS javascriptを使いHPを製作しています。
ヘッダー作成中に項目が右寄せできなくて詰まっていいるのでご教授いただきたいです。
また、スライダー写真と本文の間になぜか隙間が出てしまっているのでそこも見ていただけると嬉しいです。
よろしくお願いいたします。

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <!-- swiperのCSSファイルの読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <title>株式会社A</title>
  </head>




<body>

  <header>
    <div class="headerBody">
        <div class="headerLeft-logo">
            <a href="index.html"><img src="./image/rogo.gif" alt="ロゴマーク"></a>
        </div>

  　　  <div class="headerRight">
  　　　   <nav class="global">
    　　      <ul class="globalList">
      　      　<li><a href="index.html">HOME</a></li>
      　      　<li><a href="#Corporate Date">会社概要</a></li>
      　 　     <li><a href="#Access">アクセス</a></li>
　　　　　　  </ul>
  　　　   </nav>
  　  　</div>
   　 </div>
  　</header>

    <!-- 画像の読み込み -->
    <div class="mainVisual">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./image/buildings.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./image/1.jpg.webp"></div>
          <div class="swiper-slide"><img src="./image/bala.webp"></div>
          <div class="swiper-slide"><img src="./image/sosu.webp"></div>
         </div>
            <!-- スライダー上の文字-->
        　  <div class="mainVisual_overRay">
        　  <p>A</p>
        　 </div>
      　 </div>
  　  　</div>

    <!-- swiperのJavaScriptファイルの読み込み -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> 
    </script>
    <!-- main.jsの読み込み -->
    <script src="main.js"></script>

<main>
     <p class="border"></p>

<div class="wrapper">
<h3>　企業理念
<span class="super">Corporate Philosophy</span></h3>

 <div class="space">

　<p></p>

 </div>

<h3 id="Corporate Date">　会社概要
  <span class="super">Corporate Date</span></h3>

<table>
  <tbody>
    <div class="space">

      <p class="hutoji">社名</p>
      <p>株式会社</p><br>

      <p class="hutoji">TEL</p>
      <p></p><br>

      <p class="hutoji">設立</p>
      <p></p><br>

      <p class="hutoji">本社</p>
      <p></p>
      <p></p><br>

     </div>
   </tbody>
 </table>

<h3>　事業内容
<span class="super">Our Business</span></h3>
 <div class="space">
  <p></p>
 </div>


<h3 id="Access">　アクセス
<span class="super">Access</span></h3>
 <div>
  <h4>&emsp; 本社</h4>
   <div class="space">
    <p><br />
       <br /></div>
    <div class="p-map">
      <iframe src="https://www.google.com/maps/embed?
       frameborder="0" style="border:0" allowfullscreen></iframe></div>
    </div>

<p class="border"></p>
</main>
    <div class="footer">
      <div class="space">
        <div class="CopyRight" style="text-align: right">
           <p><a href="index.html">&copy; 2021-.</p>
        </div>
      </div>
    </div>

  </div>
 </body>
</html>

CSS

@charset "UTF-8";



body {
   margin: 0;
   background-color: #e6e6e6;
}

header {
  width: 100%;
  height: 20px;/*ヘッダー背景高さ*/
  background-color: transparent;/*メニュー背景透明*/
  position: fixed;/*固定ヘッダー*/
  z-index: 3;     /*画像の上にロゴ・メニュー置く*/
}
.headerBody{
  display: flex;
  max-width: 1200px;
  margin: auto;
  height: 50px;/*ヘッダー高さ*/
  align-items: center;/*ヘッダー上下中央寄せ*/
　 position: relative;
}
.headerLeft-logo{
   width: 0px;     /*width: 100px;*/
   height: 0px;    /*width: 100px;*/
max-height: 100px;
  padding: 0 10px;  /*ロゴ右間隔*/
  margin-right: auto;
}
.headerLeft-logo img{
  width: 15vw;        
  height: 15vw;                              
}


.globalList{
  margin: 0;
  list-style: none;
  display: flex;
}
.globalList > li{
  position: relative;
  padding: 0 10px;     /*ヘッダー中 間隔*/
border-right: none;
![![イメージ説明](6d80aa078c562a975f318863359253b1.png)](8a8c87b04f2187f0d415a80182c7a42e.png)}
.globalList > li > a:hover{
  opacity: 0.9;
}
a {
   text-decoration: none;  /*下線消去*/
   color: #ffffff;
   font-size: 15px;
}


/*　スライド　*/
.mainVisual{
  /* position:relativeで位置の基準にする */
  position: relative;
}
.swiper-wrapper{
  position: relative;
  background-color: #000000;
}
.swiper-slide img{
  width: 100%;
  height: 30%;

  z-index: 1;

  display: block;
  opacity: 0.5;/*スライダー曇りの色*/

  vertical-align: bottom; /* imgの下、隙間防止のため*/
}


.mainVisual_overRay p{
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 40%;
  color: #fff;
  font-size: 30px;
  font-family: 'IM Fell DW Pica SC', serif;
}




/*本文左の余白*/
.space{
  margin: 30px;　
 text-align: justify;
}

/*h3右の小文字*/
.super{
  font-size: 5px;
  color: #708090;
  vertical-align:baseline;
}


h3 {
  font: #000000;
  font-size: 30px;
  background-color: #dcdcdc;
  padding: 0.5em 0 0.5em 0;
  margin: 0 0 0 0;
}
.hutoji{
   font-weight: bold;
}
h4 {
   font-size: 20px;
   background-color: #f0f0f0;
}




/*　地図　*/
.p-map{
 height: 0;
 overflow: hidden;
 padding-bottom: 56.25%;/*マップ幅*/
 position: relative;
}
 .p-map iframe{
  position: absolute;
  left: 0;
  top: 0;
  height: 80%;/*マップ高さ*/
  width: 100%;
 }



/*　スマホ対応　*/
@media screen and (min-width:0px) and (max-width:480px){
  p{}
}
/*　タブレット対応　*/
@media screen and (min-wigth:481px) and (max-wight:1024px){
  p{}
}
/*　パソコン対応　*/
@media screen and (min-wight:1025) {
  p{}
}
/*　スマホ縦向き　*/
@media screen and (orientation:portrait){
  p {font-size:1em;}
}
/*　スマホ横向き　*/
@media screen and(orientation:landscape){
  p{font-size:1.2em;}
}





/*　CSSラインアニメーション　*/
.border{
    position: relative;
    font-size: 15px;
  color: #696969;
}
.border:before{
  color: #696969;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: solid 2px #696969;
    animation: border_anim 8s linear forwards;/*アニメーションかかる時間*/
}

@keyframes border_anim {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}




.wrapper{
  height: 100%;
  min-height: 100vh; /*プラウザの高さ100vhを基準のヘッダー高さ*/
  position: relative;/*相対位置*/
  padding-bottom: 80px;/*フッター高さ*/
  box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
.footer{
  width: 100%;
  background-color: #dcdcdc;
  font: #000000;/**/
  padding: 10px 0;

}
.CopyRight{
  padding: 10px 0;
  background-color: #dcdcdc;
  font-family: 'IM Fell DW Pica SC', serif;
}

javascript

//Swiper設定
const mvSwiper = new Swiper ('.swiper-container',{

loop:true,
autoplay:{　　　　//自動再生
  delay:5000,　　//画僧表示時間
},
speed:500,      //スライダー切り替え速度 0.5s
});

試したこと

display: flex;やfloat:right;をやってみたのですが右寄せ適用されませんでした。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

0

こんにちは
display:flex;をかけている部分にjustify-content:flex-end;を入れてみてはいかがですか？ 

.globalList{
  margin: 0;
  list-style: none;
  display: flex;
  justify-content:flex-end;/*←これです。*/
}


ちなみにflexboxには様々な機能があるのでよくweb上にチートシートがあったりします。
よく活用しているのでぜひ検索をかけてみてください。

また、
>スライダー写真と本文の間になぜか隙間が出てしまっている
の方は検証ができていないので、取り急ぎ分かる部分のみお伝えします。
わかりそうだったら編集します。
中途半端ですみません。
ご活用ください。

追記：現在justify-content自体が効かないので原因を調査中です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/09/15 17:58

    早くにコメントありがとうございます。
    ustify-content:flex-end; をかけてみたのですが変化はなかったです。。

    キャンセル

  • 2021/09/16 12:37

    あ、すみませんほんとですね・・・
    そもそもjustify-content自体が効いてないようです。
    他のflexの値は効いていますがこれだけが効かないようです。
    わたしの方でも原因調査しますので少々お時間いただけますか？

    キャンセル

  • 2021/09/16 13:01

    ご親切にありがとうございます。
    調査のほど、よろしくお願いいたします。
    私も引き続き調べてみます！

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る