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

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

ただいまの
回答率

87.77%

ヘッダーのレイアウトを同じにしたいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 524

score 8

サイトの模写コーディングをしています。ヘッダーを http://demo.themegraphy.com/write-ja/ のようなサイトの挙動にしたいです。ヘッダーにある検索アイコンを押すと検索バーが広がるようにしたいのですが、ググっても挙動が違っていて困っています。近いものを拾ってきてコードを弄り検索バーが展開されるところまでは実現できました。しかし検索バーが広がると同時に検索アイコンの前に配置された要素を押し込んでしまい、レイアウトが崩壊してしまいます。理想は検索バーが他の要素の上に重なって要素を押し込まないようにしたいです。
html,css,jqueryを使用しています。
jqueryとcssを組み合わせるレイアウトは、まだ学習中で一部コピペになっているので不必要なコードが含まれているかもしれません。

検索アイコン画像
イメージ説明

コード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>Document</title>
  <link rel="stylesheet" href="sanitize.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/faf3ade458.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="write.js"></script>

</head>
<body>
    <!-- header -->
    <div class="container">
      <header>
        <div class="header-flex">
          <div class="header-left">
            <h1><a href="#" class="black">Write</a></h1>
            <p class="gray">書くためのテーマ</p>
          </div>
          <div class="flex-query-test">
            <div class="header-center">
              <nav class="header-nav">
                <ul class="globalnav"> 
                  <li class="dropdown-btn">
                    <a href="#" class="black">ホーム<i class="fas fa-angle-down"></i></a>
                    <!-- <ul class="dropdown">
                      <li><a href="#"> →カスタマイズ</a></li>
                    </ul> -->
                  </li>
                  <li>
                    <a href="#" class="black">ページ<i class="fas fa-angle-down"></i></a>
                  </li>
                  <li><a href="#" class="black">タイポグラフィー</a></li>
                  <li><a href="#" class="black">お問い合わせ</a></li>
                </ul>
              </nav>

            </div>
            <div class="header-right">
                <div class="icon-search-container" data-ic-class="search-trigger">
                    <img class="pointer" src="img/search-icon.png" alt="">
                  <input type="text" class="search-input" data-ic-class="search-input" placeholder="検索...">
                </div>
            </div>
          </div>
        </div>
      </header>
    </div>
</body>
</html>
コード
* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, p, ul, li{
  padding: 0;
  margin: 0;
}

li{
  list-style: none;
}

a{
  text-decoration: none;
}



body{
  font-family: Georgia, '游明朝', 'YuMincho', 'Hiragino Mincho ProN', 'Meiryo', serif;
  line-height: 1.8;
  margin: 60px 40px;
  padding: 0 60px;
}

.black{
  color: #111;
}

.black:hover{
  opacity: .8;
}

.gray{
  color: #777777;
}

.container{
  max-width: 1035px;
  margin: 0 auto;
}

.header-flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
  padding-bottom: 10px;
}

.header-left{
  width: 30%;
}

.header-left p{
  font-size: .9rem;
}

.header-nav ul{
  display: flex;
}

.header-nav ul li{
  padding-right: 1.5rem;
}

.header-nav ul li a{
  font-size: .9rem;
}

.header-nav ul li a:hover{
  color: #c49029;
}

.flex-query-test{
  display: flex;
  width: 70%;
  justify-content: space-between;
}


.menu {
  position: relative;
  width: 100%;
  height: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.menu > li {
  float: left;
  width: 25%; /* グローバルナビ4つの場合 */
  height: 50px;
  line-height: 50px;
  background: rgb(29, 33, 19);
}

.menu > li a {
  display: block;
  color: #fff;
}

.menu > li a:hover {
  color: #999;
}

ul.menu__second-level {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

ul.menu__third-level {
  visibility: hidden;
  opacity: 0;
}

ul.menu__fourth-level {
  visibility: hidden;
  opacity: 0;
}

.menu > li:hover {
  background: #072A24;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.menu__second-level li {
  border-top: 1px solid #111;
}

.menu__third-level li {
  border-top: 1px solid #111;
}

.menu__second-level li a:hover {
  background: #111;
}

.menu__third-level li a:hover {
  background: #2a1f1f;
}

.menu__fourth-level li a:hover {
  background: #1d0f0f;
}

/* 下矢印 */
.init-bottom:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
  content: " ";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  zoom: 1;
}

.menu > li.menu__single {
  position: relative;
}

li.menu__single ul.menu__second-level {
  position: absolute;
  top: 40px;
  width: 100%;
  background: #072A24;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
  top: 50px;
  visibility: visible;
  opacity: 1;
}

/* 検索ボタンcss */


.icon-search-container {
  display: inline-block;
  height: 20px;
  width: 20px;
  position: relative;
  transition:  0.2s ease-out;
  line-height: 0px;

}

.pointer{
  position: absolute;
  z-index: 1000;
}

.pointer:hover{
  cursor: pointer;
}

.icon-search-container.active {
  width: 285px;
  height: 30px;
  border: 1px solid #000;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  position: absolute;
}

.icon-search-container.active .search-input {
  width: 200px;
}

.icon-search-container .fa-search {
  color: #2980b9;
  font-size: 30px;
  position: absolute;
  top: 7px;
  left: 8px;
  cursor: pointer;
}
.icon-search-container .fa-times-circle {
  opacity: 0;
  color: #d9d9d9;
  font-size: 20px;
  position: absolute;
  top: 12px;
  right: 8px;
  transition: 0.2s ease-out;
  cursor: pointer;
}
.icon-search-container .search-input {
  position: absolute;
  cursor: default;
  left: 35px;
  top: 5px;
  width: 0;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 0);
  transition: 0.2s ease-out;
}
コード
// ドロップダウンメニュー
$('.dropdown-btn').hover(
  function() {
    //カーソルが重なった時
    $(this).children('.dropdown').addClass('open');
  }, function() {
    //カーソルが離れた時
    $(this).children('.dropdown').removeClass('open');
  }
);

// グローバルナビの開閉
$(function() {
  $('.nav-button-wrap').on('click', function() {
    if ($(this).hasClass('active')) {
      // スマホ用メニューが表示されていたとき
      $(this).removeClass('active');
      $('.globalnav').addClass('close');
      $('.globalnav-wrap , body').removeClass('open');
    } else {
      // スマホ用メニューが非表示の時
      $(this).addClass('active');
      $('.globalnav').removeClass('close');
      $('.globalnav-wrap , body').addClass('open');
    }
  });
});



$(document).ready(function(){

  var $searchTrigger = $('[data-ic-class="search-trigger"]'),
      $searchInput = $('[data-ic-class="search-input"]'),
      $searchClear = $('[data-ic-class="search-clear"]');

  $searchTrigger.click(function(){

    var $this = $('[data-ic-class="search-trigger"]');
    $this.addClass('active');
    $searchInput.focus();

  });

  $searchInput.blur(function(){

    if($searchInput.val().length > 0){

      return false;

    } else {

      $searchTrigger.removeClass('active');

    }

  });

  $searchClear.click(function(){
    $searchInput.val('');
  });

  $searchInput.focus(function(){
    $searchTrigger.addClass('active');
  });

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/04/16 21:05

    調べるべきは実際のお手本にしているWebサイトのコードであって「同じような挙動を実現してそうな何か」ではないと思うのですが、そういう制約があるのでしょうか。
    https://ascii.jp/elem/000/000/999/999122/

    キャンセル

  • Nodoame0716

    2020/04/17 12:13

    回答ありがとうございます。
    私は模写コーディング自体が初めての経験なので、模写をするときに前提としてググっても本当にわからないときにお手本のサイトのコードを見るというルールを決めていました。コーディングのスキルを身につけたいのと同時にググって自己解決する力も養いたいと思っていましたから。
    しかし、結局ググってもわからなかったので、質問する前に一度自分で作ったコードは、無視して元のサイトのコード確認してもよかったなと反省しました。

    キャンセル

  • m.ts10806

    2020/04/17 12:19

    「ゴール」をどこに置くかだと思います。
    実装の手法は違っても同じように動けばいいのか、コードまで同じにしなければならないのか。
    実務では「これいいな」でそのまま持ってくることもありますし、近そうなものを抜き出してカスタマイズすることもありますし、動きだけを参考に自力で組むこともありますが、要件次第ゴール次第なところはあります。
    「機能」はあくまで「ちいさな部品の集合体」ですので、その機能に必要な部品をなるべく細分化していければ、それぞれの部品を作る際に調べるキーワードもハッキリしてきますし、自作するにしても何をするにしてもやりやすくなると思います。

    キャンセル

  • Nodoame0716

    2020/04/19 17:51

    なるほどゴール次第でコードの厳密さが変わるわけですね。その辺については、漠然としながらコーディングしていたので考えてなかったのですが、今回の模写では動きと大部分のレイアウトが同じであれば合格としたいと思います。実務でのことを知ることが出来たのはありがたいです。

    キャンセル

回答 1

checkベストアンサー

+1

JavaScriptを使わず、実装してみました。
CodePenでご確認ください。

position: absolute;など、不要な箇所はコメントアウトしています。

ホバー、フォーカス時の挙動については
末尾の.search-input:hover, .search-input:focusあたりをご参照ください。

/* 検索ボタンcss */
.icon-search-container {
  /* display: inline-block; */
  height: 20px;
  width: 20px;
  position: relative;
  transition: 0.2s ease-out;
  line-height: 0px;

  /* 追加 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pointer {
  /* position: absolute; */
  /* z-index: 1000; */

  /* 追加 */
  display: block;
  width: 20px; /* 好きなサイズにしてください */
  height: 20px; /* 好きなサイズにしてください */
}

.pointer:hover {
  cursor: pointer;
}
/* 不要そうなのでコメントアウト */
/*
.icon-search-container.active {
  width: 285px;
  height: 30px;
  border: 1px solid #000;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  position: absolute;
}

.icon-search-container.active .search-input {
  width: 200px;
}
.icon-search-container .fa-search {
  color: #2980b9;
  font-size: 30px;
  position: absolute;
  top: 7px;
  left: 8px;
  cursor: pointer;
}
.icon-search-container .fa-times-circle {
  opacity: 0;
  color: #d9d9d9;
  font-size: 20px;
  position: absolute;
  top: 12px;
  right: 8px;
  transition: 0.2s ease-out;
  cursor: pointer;
}
*/
.icon-search-container .search-input {
  /* position: absolute; */
  cursor: default;
  /* left: 35px; */
  /* top: 5px; */
  width: 0;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 0);
  transition: 0.2s ease-out;

  /* 追加 */
  position: relative;
  z-index: 1000;
}

/* 追加 */
.search-input {
  margin-left: -24px; /* 調整してください */
  padding: 10px; /* 調整してください */
  padding-left: 24px; /* 調整してください */
  background: rgba(255, 0, 0, 0.5);
}
.search-input:hover,
.search-input:focus {
  width: 200px; /* 調整してください */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/04/17 12:33

    回答ありがとうございます。アドバイス通りにコーディングしたらヘッダー完成しました!!不要なコードもコメントアウトして下さったのでコードの整理の手間も省けて非常にわかりやすかったです。ヘッダーのこの部分だけは、勉強不足でさっぱりわからなかったので悩んでましたが、おかげでレスポンシブ化の工程までいけます。ありがとうございました。

    キャンセル

  • 2020/04/17 12:39

    解決できたようで、よかったです!

    キャンセル

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

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

関連した質問

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