Q&A
プログラミング初心者です
お手柔らかにお願いします
コードの「お品書き」の部分なんですが、pタグの文章を改行のために4つのpタグに分けました
するとclass="catalogue-text"の部分で横幅が狭くなり中央揃えにできません。
一応margin-leftを設定すれば中央にはもって来れるんですが、他にいい方法はないのかなと思い、質問させていただきます。
以下コードです。以前別件で質問した際に一部のみ載せたら全部載せてと言われたので
すべて掲載します
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <title>麺屋しん道</title> 7 <link rel=”icon” type=”image/vnd.microsoft.icon” href=“favicon.ico”> 8 9 10 11 <!-- CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 13 14 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> 15 <link rel="stylesheet" href="css/index.css"> 16 <script type="text/javascript" src="js/slick2.js"></script> 17 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 18 19 <!-- すらーだー --> 20 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> 21 22 </head> 23<body data-spy="scroll" data-target="#menu"> 24 <!-- Start Home Section --> 25<div id="home"> 26 27 <!-- ヘッダー --> 28 <header> 29 <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top "> 30 <div class="container-fluid"> 31 <a href="#" class="navbar-brand" style="width:20%;display: inline-block;"><img src="image/logo.jpg" alt="" style="width: 100%;"></a> 32 <button class="navbar-toggler" data-toggle="collapse" type="button" data-target="#menu"> 33 <span class="navbar-toggler-icon"></span> 34 </button> 35 <div class="collapse navbar-collapse" id="menu"> 36 <ul class="navbar-nav ml-auto" > 37 <li class="nav-item "><a href="#roots" class="nav-link">「麺屋 しん道」のルーツ</a></li> 38 <li class="nav-item"><a href="#commitment" class="nav-link">こだわり</a></li> 39 <li class="nav-item"><a href="#catalogue" class="nav-link">お品書き</a></li> 40 <li class="nav-item"><a href="#" class="nav-link">お知らせ</a></li> 41 <li class="nav-item"><a href="#" class="nav-link">店舗情報</a></li> 42 </ul> 43 </div> 44 </div> 45 </nav> 46 </header> 47 48 <!-- 背景 --> 49 <div class="topimage bg-dark"> 50 <div class="swiper-container "> 51 <!-- Additional required wrapper --> 52 <div class="swiper-wrapper " > 53 <!-- Slides --> 54 <div class="swiper-slide text-center"><img src="image/jquery 1.jpg" alt=""></div> 55 <div class="swiper-slide text-center "><img src="image/jquery 2.jpg" alt=""></div> 56 <div class="swiper-slide text-center"><img src="image/jquery 3.jpg" alt=""></div> 57 </div> 58 59 </div> 60 </div> 61 62 63 <!-- しん道のルーツ --> 64 <div id="roots" class="toproots"> 65 <div class="container-fluid"> 66 <div class="row"> 67 <div class="roots-text col-12 col-md-6"> 68 <h3>麺や しん道のルーツ</h3> 69 <p>しん道の店主は、昭和町にある「つけそばさんぷく」の常連客の一人でした。その味に魅了され、先代より修行で味を学び、独立いたしました。その時、店主が誓ったのは生涯をかけて「さんぷくの味をさんぷくとともに山梨に残していく」という気持ちでした。先代が作ってくれたつけそばの中には、優しい味と共にお客様に対する愛情もたくさん入っていました。この味を絶やしては二度とこのつけめんには出会えない、その一念が現在のしん道とお客様を結びつけたのだと思っています。 長年さんぷくの味を愛していただいたお客様も、これから食べていただくお客様も、変わらぬご満足をいただき「美味しかったよ」の言葉を頂く為に、スタッフ一同一丸となって今後も伝統ある「さんぷく」の味を継承するとともにさんぷくにも負けない進化した味をお届けします。</p> 70 </div> 71 <div class="roots-image col-12 col-md-6"> 72 <img src="image/さんぷく.jpg" style="width: 100%;max-height: 40rem;" alt=""> 73 </div> 74 </div> 75 </div> 76 </div> 77 78 79 <!-- こだわり --> 80 <div id="commitment" class="topcommitment"> 81 <div class="container-fluid"> 82 <div class="row"> 83 <div class="commitment-image col-12 col-md-6 order-md-1 order-2"> 84 <img src="image/IMG_8618-scaled.jpg" style="width: 100%;max-height: 40rem;" alt=""> 85 </div> 86 <div class="commitment-text col-12 col-md-6 order-md-2 order-1"> 87 <h3>こだわり</h3> 88 <p>しん道の店主は、昭和町にある「つけそばさんぷく」の常連客の一人でした。その味に魅了され、先代より修行で味を学び、独立いたしました。その時、店主が誓ったのは生涯をかけて「さんぷくの味をさんぷくとともに山梨に残していく」という気持ちでした。先代が作ってくれたつけそばの中には、優しい味と共にお客様に対する愛情もたくさん入っていました。この味を絶やしては二度とこのつけめんには出会えない、その一念が現在のしん道とお客様を結びつけたのだと思っています。 長年さんぷくの味を愛していただいたお客様も、これから食べていただくお客様も、変わらぬご満足をいただき「美味しかったよ」の言葉を頂く為に、スタッフ一同一丸となって今後も伝統ある「さんぷく」の味を継承するとともにさんぷくにも負けない進化した味をお届けします。</p> 89 </div> 90 </div> 91 </div> 92 </div> 93 94 95 <!-- お品書き --> 96 <div id="catalogue" class="topcatalogue"> 97 <div class="container-fluid"> 98 <div class="row"> 99 <div class="catalogue-text text-center"> 100 <h3>お品書き</h3> 101 <p>麺屋しん道は、「つけそばさんぷく」で修行した店主が</p> 102 <p>日本料理の技法を駆使して創った和風ラーメン店です。</p> 103 <p>それまでの常識を大きく変え、多くのラーメン愛好家を驚かせた一杯は</p> 104 <p> グルメサイト「食べログ」にて『ベストラーメン高知 第１位』に選出されました。</p> 105 </div> 106 </div> 107 </div> 108 </div> 109 110 111 <footer> 112 113 </footer> 114 115 116 117 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 118 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 119 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 120 121 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 122 <script>var mySwiper = new Swiper ('.swiper-container', { 123 effect: "fade", 124 loop: true, 125 autoplay: { 126 delay: 4000, 127 disableOnInteraction: false, 128 }, 129 speed: 4000, 130 131 pagination: '.swiper-pagination', 132 nextButton: '.swiper-button-next', 133 prevButton: '.swiper-button-prev', 134 135 })</script> 136 137</body> 138</html>
CSS
1header { 2 z-index: 10; 3} 4 5.navbar-nav li{ 6 padding-right: .7rem; 7} 8 9.navbar-dark .navbar-nav .nav-link { 10 11 padding-top :.8rem; 12} 13 14/* 背景 */ 15.topimage { 16 z-index: 1; 17} 18 19 20 21.topimage-slider { 22 padding:0; 23} 24 25/* お品書き */ 26.catalogue-text { 27 margin-left:27%; 28}
問題のpタグの部分をbrにしましたが同じように横幅は変わりません。
初心者で質問の仕方が失礼だったり、不十分かもしれませんがよろしくお願いします。
回答1件
0
ベストアンサー
.catalogue-text はdiv要素なので、ブロックレベル要素の場合の中央寄せを使います。
css
1/* お品書き */ 2.catalogue-text { 3 margin: 0 auto; 4}
投稿2020/08/20 12:59
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。