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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Ruby on Rails 4

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

Sass

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

HTML

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

CSS

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

Q&A

0回答

1278閲覧

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

Ryo310

総合スコア14

jQuery

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

Ruby on Rails 4

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

Sass

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/09/10 12:21

編集2022/01/12 10:55

balkan style portfolio gallery

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

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

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

HTML

1<main> 2 <div class="item_wrapper"> 3 <div id="top"></div> 4 <section class="gallery"> 5 <div class="row"> 6 <ul> 7 <a href="#" class="close"></a> 8 <li> 9 <a href="#item02"> 10 <img src="/img1.jpg" alt=""> 11 </a> 12 </li> 13 <li> 14 <a href="#item02"> 15 <img src="/img2.jpg" alt=""> 16 </a> 17 </li> 18 <li> 19 <a href="#item02"> 20 <img src="/img3.jpg" alt=""> 21 </a> 22 </li> 23 <li> 24 <a class="image" href="#item01"> 25 <img src="/img4.jpg" alt=""> 26 </a> 27 </li> 28 <li> 29 <a class="image" href="#item02"> 30 <img src="/img5.jpg" alt=""> 31 </a> 32 </li> 33 <li> 34 <a class="image" href="#item01"> 35 <img src="/img6.jpg" alt=""> 36 </a> 37 </li> 38 <li> 39 <a class="image" href="#item01"> 40 <img src="/img7.jpg" alt=""> 41 </a> 42 </li> 43 <li> 44 <a class="image" href="#item01"> 45 <img src="/img8.jpg" alt=""> 46 </a> 47 </li> 48 49 <li> 50 <a href="#item02"> 51 <img src="/img1.jpg" alt=""> 52 </a> 53 </li> 54 <li> 55 <a href="#item02"> 56 <img src="/img2.jpg" alt=""> 57 </a> 58 </li> 59 60 </ul> 61 </div> <!-- / row --> 62 63 64 65 <!-- Item 01 --> 66 <div id="item01" class="port"> 67 <div class="row"> 68 <div class="description"> 69 <h1>Item 01</h1> 70 <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> 71 <br><a href="/items/1">もっと見る</a> 72 </div> 73 <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/1379781/winterletters-jeremiahbritton-dribbble.png" alt=""> 74 </div> <!-- / row --> 75 </div> <!-- / Item 01 --> 76 77 <!-- Item 02 --> 78 <div id="item02" class="port"> 79 <div class="row"> 80 <div class="description"> 81 <h1>Item 02</h1> 82 <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> 83 <br><a href="/items/2">もっと見る</a> 84 </div> 85 <img src="https://d13yacurqjgara.cloudfront.net/users/22177/screenshots/404704/wontstopblue-womens-jeremiahbritton.jpg" alt=""> 86 </div> <!-- / row --> 87 </div> <!-- / Item 02 --> 88 89 </section> <!-- / projects --> 90 </div> 91</main>

Sass

1main { 2 .item_wrapper { 3 * { 4 -webkit-box-sizing: border-box; 5 -moz-box-sizing: border-box; 6 box-sizing: border-box; 7 8 &:before, &:after { 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12 } 13 } 14 15 .row { 16 width: 90%; 17 margin: 0 auto; 18 padding: 0; 19 clear: both; 20 21 img { 22 max-width: 100%; 23 height: auto; 24 padding: 0; 25 margin: 0; 26 } 27 } 28 29 %col { 30 float: left; 31 margin: 0 0.8771929825%; 32 overflow: hidden; 33 } 34 35 // PROJECTS 36 .gallery { 37 padding: 0 0 300px; 38 position: relative; 39 overflow: hidden; 40 41 ul { 42 padding: 0; 43 position: relative; 44 45 li { 46 @extend %col; 47 48 margin-bottom: 20px; 49 width: 23.2456140351%; 50 51 position: relative; 52 53 a { 54 display: block; 55 position: relative; 56 width: 100%; 57 height: 100%; 58 margin: 0; 59 padding: 0; 60 line-height: 0; 61 62 &:before { 63 position: absolute; 64 width: 32px; 65 height: 32px; 66 top: 40%; 67 left: 50%; 68 margin: (-14px) 0 0 -16px; 69 background: url(data:長いので省略) no-repeat; 70 content: ""; 71 opacity: 0; 72 z-index: 1; 73 74 @include transition(all, 0.3s, linear); 75 } 76 77 &:hover:before { 78 top: 50%; 79 opacity: 1; 80 } 81 82 &:after { 83 position: absolute; 84 width: 100%; 85 top: 0; 86 bottom: 0; 87 background: rgba(0, 0, 0, 0.3); 88 content: ""; 89 opacity: 0; 90 91 @include transition(all, 0.3s, linear); 92 } 93 94 &:hover:after { 95 opacity: 1; 96 } 97 } 98 } 99 } 100 } 101 102 // PORT 103 .port { 104 position: absolute; 105 width: 100%; 106 height: 100%; 107 top: 0; 108 left: 0; 109 padding-top: 100px; 110 background: #ffffff; 111 background-color: #fafafa; 112 z-index: 103; 113 visibility: hidden; 114 -webkit-transform: translateY(-100%); 115 transform: translateY(-100%); 116 border-bottom: 1px solid #d0d0d0; 117 118 @include transition(all, 0.5s, ease-in-out); 119 120 img { 121 width: 50%; 122 } 123 124 .description { 125 float: left; 126 width: 50%; 127 max-height: 100%; 128 padding: 0 40px 40px; 129 overflow: auto; 130 } 131 132 h1 { 133 font-size: 35px; 134 line-height: 2.3; 135 padding: 0; 136 } 137 138 > * { 139 opacity: 0; 140 141 @include transition(all, 0.5s, linear); 142 } 143 144 &.item_open { 145 visibility: visible; 146 -webkit-transform: translateY(0%); 147 transform: translateY(0%); 148 149 @include transition(all, 0.4s, ease-in-out); 150 } 151 152 > * { 153 opacity: 1; 154 -webkit-transition-delay: 0.5s; 155 transition-delay: 0.5s; 156 } 157 } 158 159 .close { 160 width: 21px; 161 height: 21px; 162 background: url(長いので省略)no-repeat; 163 position: absolute; 164 right: 10px; 165 top: -121px; 166 opacity: 1; 167 z-index: 1004; 168 169 @include transition(all, 0.1s, ease-in-out); 170 } 171 172 .item_open .close { 173 opacity: 1; 174 top: 0px; 175 @include transition(all, 0.3s, ease-in-out); 176 } 177 178 } 179}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/10 12:30

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

2017/09/10 12:38

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

2017/09/10 12:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問