質問編集履歴

4 タグの変更

Ryo310

Ryo310 score 10

2017/09/10 21:52  投稿

balkan style portfolio galleryで写真を追加する方法
balkan style portfolio gallery
https://codepen.io/anon/pen/XawyVa
のURLに記載されたコードをコピーし、一部修正が必要だったため修正して使ってます。
初期では写真が8枚なのですが、追加したかったため.row内の<li></li>で増やそうとしたところ
下記写真のようにレイアウトが崩れてしまいます。検証をしたのですが原因がわかりませんでした。。
(下2つの写真です)---
![イメージ説明](5d5c92ff106f0556628253e264866190.png)
プログラミングについてはまだ初心者でわからないことが多いのでどなたかお助けいただけますと嬉しいです。。!!
```HTML
<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>
```
```CSS
```Sass
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);
   }
 }
}
```
  • HTML

    13911 questions

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

  • CSS

    9295 questions

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

  • jQuery

    9403 questions

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

  • Ruby on Rails 4

    2596 questions

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

  • Sass

    452 questions

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

3 コードの編集

Ryo310

Ryo310 score 10

2017/09/10 21:38  投稿

balkan style portfolio galleryで写真を追加する方法
balkan style portfolio gallery
https://codepen.io/anon/pen/XawyVa
のURLに記載されたコードをコピーし、一部修正が必要だったため修正して使ってます。
初期では写真が8枚なのですが、追加したかったため.row内の<li></li>で増やそうとしたところ
下記写真のようにレイアウトが崩れてしまいます。検証をしたのですが原因がわかりませんでした。。
(下2つの写真です)---
![イメージ説明](5d5c92ff106f0556628253e264866190.png)
プログラミングについてはまだ初心者でわからないことが多いのでどなたかお助けいただけますと嬉しいです。。!!
```HTML
<main>
 <h3 class="pickup">pickup商品</h3>  
 <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>
```
```CSS
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);
   }
 }
}
```
  • HTML

    13911 questions

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

  • CSS

    9295 questions

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

  • jQuery

    9403 questions

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

  • Ruby on Rails 4

    2596 questions

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

2 コードの修正

Ryo310

Ryo310 score 10

2017/09/10 21:37  投稿

balkan style portfolio galleryで写真を追加する方法
balkan style portfolio gallery
https://codepen.io/anon/pen/XawyVa
のURLに記載されたコードをコピーし、一部修正が必要だったため修正して使ってます。
初期では写真が8枚なのですが、追加したかったため.row内の<li></li>で増やそうとしたところ
下記写真のようにレイアウトが崩れてしまいます。検証をしたのですが原因がわかりませんでした。。
(下2つの写真です)---
![イメージ説明](5d5c92ff106f0556628253e264866190.png)
プログラミングについてはまだ初心者でわからないことが多いのでどなたかお助けいただけますと嬉しいです。。!!
```HTML
<main>
 <h3 class="pickup">pickup商品</h3>
 <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>
```
```CSS
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(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
     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);
   }
 }
}
```
  • HTML

    13911 questions

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

  • CSS

    9295 questions

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

  • jQuery

    9403 questions

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

  • Ruby on Rails 4

    2596 questions

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

1 コードの追加

Ryo310

Ryo310 score 10

2017/09/10 21:36  投稿

balkan style portfolio galleryで写真を追加する方法
balkan style portfolio gallery
https://codepen.io/anon/pen/XawyVa
のURLに記載されたコードをコピーし、一部修正が必要だったため修正して使ってます。
初期では写真が8枚なのですが、追加したかったため.row内の<li></li>で増やそうとしたところ
下記写真のようにレイアウトが崩れてしまいます。検証をしたのですが原因がわかりませんでした。。
(下2つの写真です)
(下2つの写真です)---
![イメージ説明](5d5c92ff106f0556628253e264866190.png)
プログラミングについてはまだ初心者でわからないことが多いのでどなたかお助けいただけますと嬉しいです。。!!
プログラミングについてはまだ初心者でわからないことが多いのでどなたかお助けいただけますと嬉しいです。。!!
```HTML
<main>
 <h3 class="pickup">pickup商品</h3>
 <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>
```
```CSS
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(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) 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);
   }
 }
}
```
  • HTML

    13911 questions

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

  • CSS

    9295 questions

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

  • jQuery

    9403 questions

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

  • Ruby on Rails 4

    2596 questions

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

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