編集履歴

回答編集履歴

add solution to background changing

2020/07/31 10:34

投稿

スコア466

answer CHANGED Viewed

@@ -78,4 +78,132 @@
   background-position: center center;
   background-size: cover;
 }
-```
+```
+---
+追記：左側で写真のスライドみたいなのを作りたいとコメントいただいたので、CSS Transition で簡単な実装を追記します。
+まずは ul を捨てて、一つの a だけ残してください。
+```html
+<div class="main_l">
+    <a role="img"></a>
+</div>
+```
+a に main_l を満たすための CSS：
+```css
+.main_l { display: block; }
+.main_l a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+```
+a の background を設定します。background-image を後で JavaScript に設定します。
+```css
+.main_l a {
+  background-position: center center;
+  background-size: cover;
+}
+```
+JavaScript について、まずは設定を説明しましょう：
+```javascript
+let config = {
+  selector: ".main_l a",
+  bgUrls: [
+    "https://placehold.jp/1000x1000.png?text=Slide%201",
+    "https://placehold.jp/1000x1000.png?text=Slide%202",
+    "https://placehold.jp/1000x1000.png?text=Slide%203",
+    "https://placehold.jp/1000x1000.png?text=Slide%204"
+  ],
+  fadeDelay: 1,
+  interval: 5,
+  onTransition: currentUrl => {
+    let mainL = document.querySelector(".main_l a");
+    mainL.setAttribute(
+      "href",
+      `#anchor_${currentUrl.substring(currentUrl.length - 1)}`
+    );
+    mainL.setAttribute(
+      "aria-label",
+      `Slide ${currentUrl.substring(currentUrl.length - 1)}`
+    );
+  }
+};
+```
+selector はスライドになる要素の CSS 選択符です。複数の要素が見つかる場合、最初の要素を使います。
+bgUrls は背景画像の URL の Array です。
+fadeDelay は画像の切り替えのとき fade 動画の長さです。単位は秒。
+interval は画像の切り替えの間隔時間です。単位は秒。
+onTransition は毎回画像切り替えの際に実行したい関数です。関連のため、切り替え後表示する画像の URL を引数で渡します。これで切り替えごとURLによってリンクを変えます。
+実装は下記のようになります：
+```javascript
+(function(config) {
+  // background を変える要素を選択
+  let mainL = document.querySelector(config.selector);
+  // background 画像を事前ロード
+  // じゃないと第一回コードする際 fade-in 動画見えない
+  let bgUrls = config.bgUrls;
+  function preloadImgUrls(urlArr) {
+    for (let url of urlArr) {
+      let img = new Image();
+      img.src = url;
+    }
+  }
+  preloadImgUrls(bgUrls);
+  // 最初の background を設定、今の background への index を記録
+  // 次の background 循環で取得
+  let currentBg = 0;
+  mainL.style.backgroundImage = `url(${bgUrls[currentBg]})`;
+  function getNextBgUrl() {
+    currentBg = (currentBg + 1) % bgUrls.length;
+    return bgUrls[currentBg];
+  }
+  // fade 動画を設定
+  let fadeDelay = config.fadeDelay;
+  mainL.style.transition = `opacity ${fadeDelay}s ease-in-out`;
+  async function waitForMs(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  async function fadeOut() {
+    mainL.style.opacity = 0;
+    await waitForMs(fadeDelay * 1000);
+  }
+  async function fadeIn() {
+    await waitForMs(20); // fix animation fade in
+    // ここまたないと fade-in 動画たまに見えない
+    mainL.style.opacity = "";
+    await waitForMs(fadeDelay * 1000);
+  }
+  // 背景画像の循環を起動
+  let onTransition = config.onTransition;
+  onTransition(bgUrls[currentBg]);
+  setInterval(async () => {
+    await fadeOut();
+    let url = getNextBgUrl();
+    mainL.style.backgroundImage = `url(${url})`;
+    onTransition(url);
+    await fadeIn();
+  }, config.interval * 1000);
+})(config);
+```
+[Demo](https://codesandbox.io/s/peaceful-khorana-z2d25?file=/index.js) で実装の様子を見れます。

use background

2020/07/31 10:33

投稿

YufanLou

スコア466

answer CHANGED Viewed

@@ -50,4 +50,32 @@
 ```css
 .main_l img { width: 100vw; }
+```
+---
+追記：完璧に余白ないようにするには、img 要素ではなく、background を使います。目が不自由な方のために、a 要素に role="img" をつけて、aria-label="説明文" もつけます。
+```html
+<ul>
+    <li style="background-image: url(images/bg01.jpg)">
+        <a href="XXX" role="img" aria-label="画像1"></a>
+    </li>
+    <li style="background-image: url(images/bg2.jpg)">
+        <a href="XXX" role="img" aria-label="画像2"></a>
+    </li>
+    <li style="background-image: url(images/bg03.jpg)">
+        <a href="XXX" role="img" aria-label="画像3"></a>
+    </li>
+    <li style="background-image: url(images/bg04.jpg)">
+        <a href="XXX" role="img" aria-label="画像4"></a>
+    </li>
+</ul>
+```
+```css
+.main_l li {
+  background-position: center center;
+  background-size: cover;
+}
 ```

fix width

2020/07/23 11:21

投稿

YufanLou

スコア466

answer CHANGED Viewed

@@ -42,4 +42,12 @@
 ```css
 .main_l { flex-direction: column; }
+```
+---
+追記：コメントの実例を改めてみたら、その効果は画像の width を 100vw に固定したものです。下記のようで設定できます。
+```css
+.main_l img { width: 100vw; }
 ```

add change flex-direction

2020/07/23 10:59

投稿

YufanLou

スコア466

answer CHANGED Viewed

@@ -34,4 +34,12 @@
 ```css
 .main_l_box1 { height: 100vh; }
+```
+---
+追記：ひたすら 100vh 設定したら左側他の調整が難しくなりそうなので、下記のようでは内容の高さが固定されなくても左側を満たします。flex の方向を縦にします。画像の高さが十分であれば上下に余白がなくなれます。けど、ウィンドが短くなると、左右に余白が出るので、画像に min-width を設定してください。
+```css
+.main_l { flex-direction: column; }
 ```

leave no space above and below

2020/07/23 10:08

投稿

YufanLou

スコア466

answer CHANGED Viewed

@@ -26,4 +26,12 @@
   justify-content: center;
   align-items: center;
 }
+```
+---
+追記：上下の余白をなくしたいと依頼されました：
+```css
+.main_l_box1 { height: 100vh; }
 ```

fix width

2020/07/22 08:36

投稿

YufanLou

スコア466

answer CHANGED Viewed

@@ -21,6 +21,7 @@
 ```css
 .main_l {
+  overflow: hidden;  /* width を内容に影響されないように */
   display: flex;
   justify-content: center;
   align-items: center;

縦で中央固定追加

2020/07/22 04:19

投稿

YufanLou

スコア466

answer CHANGED Viewed

@@ -13,4 +13,16 @@
 ---
-追記：`overflow: scroll`使うと上下だけではなく左右スクロールバーも出そうです。上下だけでほしいなら、`overflow-y`を使ってください。左右だけでほしいなら、`overflow-x`を使ってください。
+追記：`overflow: scroll`使うと上下だけではなく左右スクロールバーも出そうです。上下だけでほしいなら、`overflow-y`を使ってください。左右だけでほしいなら、`overflow-x`を使ってください。
+---
+追記：`.main_l` の中の画像を中央に固定したい場合はこうしてください：
+```css
+.main_l {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```

add fix for extra scroll bar

2020/07/22 04:12

投稿

YufanLou

スコア466

answer CHANGED Viewed

@@ -9,4 +9,8 @@
 position などいりません。
-[Demo](https://codesandbox.io/s/peaceful-khorana-z2d25)
+[Demo](https://codesandbox.io/s/peaceful-khorana-z2d25)
+---
+追記：`overflow: scroll`使うと上下だけではなく左右スクロールバーも出そうです。上下だけでほしいなら、`overflow-y`を使ってください。左右だけでほしいなら、`overflow-x`を使ってください。