Q&A
具体的にどこのことを言っていますか。
現在のコードと画面キャプチャをご提示ください。
「試行錯誤している」だけだと何を調べて何を試したか分からないので具体的に記載してください。
願わくば「質問テンプレート」を利用して再編していただけると（質問は編集できます）
前提・実現したいこと
現在Bootstrapを使ってコーディングしており、下記の画像のようなコンテンツと文字が重なり合ったデザインにしたいと思い、試行錯誤しているのですが初心者でどうしてもわからず困っています。
ぜひ教えて頂けますと幸いです。!
ここから追記です
上部に添付しました画像のピンクの部分を実装したいと思っています。
説明が難しくわかりずらく申し訳ありません。
右側の隙間は開けずに下部にあるスクショのような感じでカーセルを配置し上に画像上からはみ出す形で見本のように文字を乗せたいです。
該当のソースコード
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML List</title> <link rel="stylesheet" href="../css/style.css" type="text/css" /> <script type="text/javascript" src="../js/import.js"></script> <script type="text/javascript" src="../js/jqueryResponsiveFullWideSliderEasingPlus.js"></script> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> </head> <body class="drawer drawer--right"> <header class="sticky-top"> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand ml-lg-3 mt-lg-2" href="#"><img src="" alt="ロゴ画像" /></a> <div class="collapse navbar-collapse justify-content-end"> <ul class="navbar-nav mt-lg-2"> <li class="nav-item active"> <a class="nav-link mr-lg-4" href="#">SAMPLE<br><sup>サンプル</sup></a> </li> <li class="nav-item"> <a class="nav-link mr-lg-4" href="#"> SAMPLE<br><sup>サンプル</sup></a> </li> <li class="nav-item"> <a class="nav-link mr-lg-4" href="#">SAMPLE<br><sup>サンプル</sup></a> </li> <li class="nav-item"> <a class="nav-link mr-lg-4" href="#">SAMPLE<br><sup>サンプル</sup></a> </li> <li class="nav-item"> <a class="nav-link mr-lg-4" href="#">SAMPLE<br><sup>サンプル</sup></a> </li> <li class="nav-item"> <a class="nav-link mr-lg-4" href="#">SAMPLE<br><sup>サンプル</sup></a> </li> </ul> </div> </nav> </header> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-lg-10 offset-lg-2 cover-img" style="background-image:url('https://manablog.org/wp-content/uploads/2016/11/top-img.jpg');"> <div class="cover-text mt-lg-5 ml-lg-5"> <p class="h1 font-weight-bold">Sample<br>Text</p> <p>サンプルサンプルサンプルサンプル</p> </div> </div> </div> </div> </bpdy>
CSS
@charset "utf-8"; // Vendors // External libraries and frameworks. @import 'vendors/slick'; // Imported via node_modules. @import 'vendors/slick-theme'; @import 'vendors/bootstrap/bootstrap-grid'; @import 'vendors/bootstrap/bootstrap-reboot'; @import 'vendors/bootstrap/bootstrap'; @import 'vendors/accordion'; @import 'vendors/map'; // Base // Includes all the main Storefront css. @import 'base/base'; // @import 'base/layout'; @import "components/*"; @import "pages/*"; body{ header nav div ul li{ text-align: center; } } .content-1{ div{ text-align: center; p{ display: inline-block; } } } .cover-img { height: 600px; display: table; width: 100%; background-size: cover; } /* ワイドスクリーン用のCSS */ @media only screen and (min-width: 1500px) { .cover-img { height: 800px; } } /* タブレット用のCSS */ @media only screen and (min-width : 768px) and (max-width : 1200px) { .cover-img { height: 500px; } } /* スマホ用のCSS */ @media only screen and (max-width: 479px) { .cover-img { height: 300px; } } .cover-text { color: black; }
試したこと
まずBootstrapにもともと機能としてあるカーセルを配置しようとしましたがうまく動きませんでした。
（具体的にはコードをそのままコピペしたところ、スライドするはずだった画像が全画面表示され動きませんでした。）
下記のサイトを参考に見ていました。
http://www.tohoho-web.com/bootstrap/carousel.html
現在上部固定のメニューバーのみ入れてあります。
トップの画像はとりあえずスペースの目安ように適当に入れたものです。
なぜかメニューバーの文字重なりも起きていますが気にしないでください…！
補足情報（FW/ツールのバージョンなど）
Bootstrap自体初めてで、自由に使っていいよと渡されたサンプル上でやっているのでバージョンなどがイマイチわかりません。
曖昧で申し訳ありません。
回答1件
0
ベストアンサー
<div style="position:absolute;"> <div style="background-color:rgba(100,200,40,0.7);position:absolute;width:300px;height:200px;z-index:300;top:100px;">もじもじもじもじもじもじもじもじもじもじもじもじもじもじもじもじもじもじ</div> <div style="background-color:blue;position:absolute;height:400px;width:400px;left:200px;"></div> </div>
こんな感じでCSS調整してるんじゃないですか？コピペしたら見れますよ。これが最適な記述の仕方ってわけではないので、要点を掴んだら自分なりに書き換えて使った方がいいです。
投稿2019/05/22 18:42
総合スコア6415
あなたの回答
tips
プレビュー
