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

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

新規登録して質問してみよう
ただいま回答率
87.20%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Sass

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

コーディング規約

コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

HTML

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

CSS

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

受付中

カルーセル表示画像の上にテキスト配置したい

hiyoko_000001
hiyoko_000001

総合スコア3

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Sass

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

コーディング規約

コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

HTML

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

CSS

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

1回答

0評価

0クリップ

1059閲覧

投稿2021/10/26 17:05

カルーセル表示画像の上にテキスト配置したい

【やりたいこと】
・PC表示/SP(レスポンシブ)表示の2種類
・カルーセルで画像を表示(画像:3枚)
・カルーセル画像の上にタイトルテキスト2行を中央配置

【参照】
下記イラスト画像2枚のような状態にしたいです。

【できていないこと】
・**display: none;**指定しているのにPC/SPのカルーセルが常に2つウィンドウに表示されてしまう。
・title h1 h2が真ん中に来ない。headerとcoverの間に白い余白(title h1 h2の分)ができてしまう。

初歩的なご質問で大変申し訳ございません。
どなたか詳しい方にご教示頂ければ幸いです。
よろしくお願いいたします。

【HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample Shop</title> <meta name="description" content="ページの説明が入ります"> <!-- CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> <link rel="stylesheet" href="./css/style.css"> <!-- カルーセル --> <!-- Add the slick-theme.css if you want default styling --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <!-- Add the slick-theme.css if you want default styling --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> <!-- FontAwesome --> <script src="https://kit.fontawesome.com/0f595899ca.js" crossorigin="anonymous"></script> </head> <body> <!-- ヘッダー --> <header class="header"> <a href="index.html" class="logo1"><img src="./images/logo/logo.png" alt="Sample Shop"></a> <a href="index.html" class="logo2"><img src="./images/logo/logo_sp.png" alt="Sample Shop"></a> <div id="nav-button" class="nav-button"><i class="fas fa-bars" aria-label="menu"></i></div> <!-- SPナビゲーション --> <nav class="sp-nav"> <ul class="sp-nav-list"> <li><a href="information.html">INFORMATION</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="menu.html">MENU</a></li> </ul> </nav> <!-- PCナビゲーション --> <nav class="pc-nav"> <ul class="pc-nav-list"> <li><a href="information.html">INFORMATION</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="menu.html">MENU</a></li> </ul> </nav> </header> <!-- カバー --> <div class="cover"> <div class="title"> <h1>Have a wonderful time</h1> <h2>Organic Cafe & Restaurant</h2> </div> <!-- SPカルーセル --> <div class="carousel sp"> <div><img src="./images/carousel/sp_slide_1.jpg" alt="photo"></div> <div><img src="./images/carousel/sp_slide_2.jpg" alt="photo"></div> <div><img src="./images/carousel/sp_slide_3.jpg" alt="photo"></div> </div> <!-- PCカルーセル --> <div class="carousel pc"> <div><img src="./images/carousel/pc_slide_1.jpg" alt="photo"></div> <div><img src="./images/carousel/pc_slide_2.jpg" alt="photo"></div> <div><img src="./images/carousel/pc_slide_3.jpg" alt="photo"></div> </div> </div> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script src="./js/carousel.js"></script> <script src="./js/hamburger.js"></script> </body> </html>
【Sass】 .cover { position: relative; width: 100%; height: auto; align-items: center; justify-content: center; z-index: 50; } .title { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: $white; z-index: 1000;   padding: 23.5rem 4rem 28.5rem;   h1 {    font-size: 3.2rem;   }   h2 {    font-size: 2.4rem; } @media (min-width: 769px) { //pc padding: 22.4rem 32.3rem 300rem; h1: font-size: 8rem; h2: font-size: 4.8rem; } } .carousel sp { @media (min-width: 769px) { display: none; } } .carousel pc { @media (max-width: 768px) { display: none; } }

イメージ説明
イメージ説明

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy

2021/10/27 01:23

slick を呼び出している部分のコードがあった方が回答がつきやすいかもですね。
hiyoko_000001

2021/10/27 05:48

さようでございますね…ご指摘ありがとうございます。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Sass

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

コーディング規約

コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

HTML

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

CSS

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