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

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

ただいまの
回答率

90.61%

  • HTML

    8686questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6542questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5589questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ruby on Rails 4

    2406questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Sass

    253questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

balkan style portfolio galleryで写真を追加する方法

受付中

回答 0

投稿 編集

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

Ryo310

score 4

balkan style portfolio gallery

https://codepen.io/anon/pen/XawyVa
のURLに記載されたコードをコピーし、一部修正が必要だったため修正して使ってます。

初期では写真が8枚なのですが、追加したかったため.row内の<li></li>で増やそうとしたところ
下記写真のようにレイアウトが崩れてしまいます。検証をしたのですが原因がわかりませんでした。。
(下2つの写真です)---
イメージ説明

プログラミングについてはまだ初心者でわからないことが多いのでどなたかお助けいただけますと嬉しいです。。!!

<main>
  <div class="item_wrapper">
    <div id="top"></div>
    <section class="gallery">
        <div class="row">
            <ul>
                <a href="#" class="close"></a>
                <li>
                    <a href="#item02">
                        <img src="/img1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#item02">
                        <img src="/img2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#item02">
                        <img src="/img3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a class="image" href="#item01">
                        <img src="/img4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a class="image" href="#item02">
                        <img src="/img5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a class="image" href="#item01">
                        <img src="/img6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a class="image" href="#item01">
                      <img src="/img7.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a class="image" href="#item01">
                        <img src="/img8.jpg" alt="">
                    </a>
                </li>

                <li>
                    <a href="#item02">
                        <img src="/img1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#item02">
                        <img src="/img2.jpg" alt="">
                    </a>
                </li>

            </ul>
        </div> <!-- / row -->



        <!-- Item 01 -->
        <div id="item01" class="port">
            <div class="row">
                <div class="description">
                    <h1>Item 01</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
                    <br><a href="/items/1">もっと見る</a>
                </div>
                <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1379781/winterletters-jeremiahbritton-dribbble.png" alt="">
            </div> <!-- / row -->
        </div> <!-- / Item 01 -->

        <!-- Item 02 -->
        <div id="item02" class="port">
            <div class="row">
                <div class="description">
                    <h1>Item 02</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
                  <br><a href="/items/2">もっと見る</a>
                </div>
                <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/404704/wontstopblue-womens-jeremiahbritton.jpg" alt="">
            </div> <!-- / row -->
        </div> <!-- / Item 02 -->

    </section> <!-- / projects -->
  </div>  
</main>
main {
  .item_wrapper {
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      &:before, &:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
    }

    .row {
      width: 90%;
      margin: 0 auto;
      padding: 0;
      clear: both;

      img {
        max-width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
      }
    }

    %col {
      float: left;
      margin: 0 0.8771929825%;
      overflow: hidden;
    }

    // PROJECTS
    .gallery {
      padding: 0 0 300px;
      position: relative;
      overflow: hidden;

      ul {
        padding: 0;
        position: relative;

        li {
          @extend %col;

          margin-bottom: 20px;
          width: 23.2456140351%;

          position: relative;

          a {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            line-height: 0;

            &:before {
              position: absolute;
              width: 32px;
              height: 32px;
              top: 40%;
              left: 50%;
              margin: (-14px) 0 0 -16px;
              background: url(data:長いので省略) no-repeat;
              content: "";
              opacity: 0;
              z-index: 1;

              @include transition(all, 0.3s, linear);
            }

            &:hover:before {
              top: 50%;
              opacity: 1;
            }

            &:after {
              position: absolute;
              width: 100%;
              top: 0;
              bottom: 0;
              background: rgba(0, 0, 0, 0.3);
              content: "";
              opacity: 0;

              @include transition(all, 0.3s, linear);
            }

            &:hover:after {
              opacity: 1;
            }
          }
        }
      }
    }

    // PORT
    .port {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding-top: 100px;
      background: #ffffff;
      background-color: #fafafa;
      z-index: 103;
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      border-bottom: 1px solid #d0d0d0;

      @include transition(all, 0.5s, ease-in-out);

      img {
        width: 50%;
      }

      .description {
        float: left;
        width: 50%;
        max-height: 100%;
        padding: 0 40px 40px;
        overflow: auto;
      }

      h1 {
        font-size: 35px;
        line-height: 2.3;
        padding: 0;
      }

      > * {
        opacity: 0;

        @include transition(all, 0.5s, linear);
      }

      &.item_open {
        visibility: visible;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);

        @include transition(all, 0.4s, ease-in-out);
      }

      > * {
        opacity: 1;
        -webkit-transition-delay: 0.5s;
        transition-delay: 0.5s;
      }
    }

    .close {
      width: 21px;
      height: 21px;
      background: url(長いので省略)no-repeat;
      position: absolute;
      right: 10px;
      top: -121px;
      opacity: 1;
      z-index: 1004;

      @include transition(all, 0.1s, ease-in-out);
    }

    .item_open .close {
        opacity: 1;
        top: 0px;
        @include transition(all, 0.3s, ease-in-out);
    }

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • kei344

    2017/09/10 21:30

    書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)を提示されたほうが回答を得やすいと思います。

    キャンセル

  • Ryo310

    2017/09/10 21:38

    そうですね!アドバイスありがとうございます!次回以降も気をつけます!

    キャンセル

  • kei344

    2017/09/10 21:42

    SCSS(SASS?)ではなく出力されたCSSを提示されるか、もしくは質問タグにSCSS(SASS?)を設定されたほうが良いと思います。

    キャンセル

まだ回答がついていません

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

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

関連した質問

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

  • HTML

    8686questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6542questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5589questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ruby on Rails 4

    2406questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Sass

    253questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。