teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.35%
トップCSS3に関する質問
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

8891閲覧

Bootstrapでのテキストの行間指定の仕方がわからない

gori-mutyu
gori-mutyu

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/03/31 04:26

編集2020/03/31 18:03

0

0

前提・実現したいこと

二つの文章の行間を広くしたい

発生している問題・エラーメッセージ

行間が狭くて見づらい

該当のソースコード

ソースコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sample</title>
    <link rel="icon" type="image/png" href="img/bamboo1.jpeg">
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>

  <body style="background-color: antiquewhite;"> 
    <header>
        <h1 class="mt-1 text-center font-weight-italic">竹ちゃんのどこでも教室
            </h1>
        
       
          <!-- Content here -->
          
        
          
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
       
            <a class="navbar-brand" href="#"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="mx-auto  navbar-nav mr-auto">
                <li class="nav-item">
                  <a class="nav-link mr-5" href="#"><strong>ホーム</strong><span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mr-5" href="#"><strong>サイトを制作したきっかけ</strong></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mr-5" href="#"><strong>プロフィール</strong></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mr-5" href="#"><strong>指導方法</strong></a>
              </li>
                <li class="nav-item">
                    <a class="nav-link mr-5" href="#"><strong>料金</strong></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link mr-5" href="#"><strong>お問い合わせ</strong></a>
                </li>
              </ul>
              
            </div>
          </nav>

          <!-- main -->
      <div class="container">
        <div class="row"> 
          <div class="card col-lg-offset-1 col-lg-8 pt-3 mt-3 mr-4 ">
           
              
            
            <img src="/img/online-4727942_640.jpg" alt="Card image">
            <p class="text-center"><big>「竹ちゃんのどこでも教室」は、オンライン授業対応の家庭教師です。<br>コンセプトは、
              <strong>「なんだって？　自分の部屋が　教室に？」</strong>です。<br>
              あなたの住んでいる部屋そのものが教室となります。<br>
              今まで学んできたことを子供たちに伝えていきたいと思っています。</big>
            　　</p>
          </div>
          <div class="card col-lg-3  ml-5 mt-3 mr-3 h-50">
            <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
            <div class="card-body >
              <h4 class="card-title">Card title</h4>
              <p class="card-text">
               \ntent.
              </p>
              <a href="#!" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
          
        </div>
        <div class="row"> 
          <div class="card col-lg-offset-1 col-lg-8 pt-3 mt-3 mr-4 ">
            <p class="lead text-center"><big>今後の展開</big></p>
            <p class="text-center"><big>家庭教師以外にも、英語の学習法・効率的な勉強法・おすすめの本などを発信したいと思っています。
              また、無類のガジェット好きなので、勉強に役立つ機器やアプリも併せて紹介する予定です。
            </big></p>
            <!-- 文字を大きくするのは<big></big>,小さくするのは<small></small> -->

       
        
        
        
      </div> 
       
          
    </header>
  </body>
</html>

試したこと

teratail,Googleで検索

補足情報（FW/ツールのバージョンなど）

Bootstrap　ver.4.4
htmlは文字制限のため投稿不可
CSS内はいじらない方がよいとのことだったので、HTML内で修正したい

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/03/31 23:28 編集

コンテンツのほうか cardとcolは共存不可能だったはずなのでそのせいでは
gori-mutyu
gori-mutyu

2020/04/01 02:34

そのような理由でできなかったのですね。 試しに、<p style="line-height:2rem>を挿入したらうまくいきました。 丁寧な回答ありがとうございました。
guest

回答2件

0

自己解決

試しに、<p style="line-height:2rem>を挿入したらうまくいきました。

投稿2020/04/01 02:35

gori-mutyu
gori-mutyu

総合スコア8

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

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

0

投稿2020/03/31 05:28

sunglass
sunglass

総合スコア303

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

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

退会済みユーザー

退会済みユーザー

2020/03/31 05:58

リンクがうまく貼れていない様ですが
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問

トップCSS3に関する質問

Bootstrapでのテキストの行間指定の仕方がわからない