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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

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

HTML

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

CSS

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

Q&A

解決済

2回答

813閲覧

li要素の頭揃えが出来ない。

shinpachi

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/03/09 03:31

編集2020/03/10 13:03

html

1<div class="home"> 2 <!-- <div class="container-fluid"> --> 3 <div class="container"> 4 <!-- <div class="d-flex flex-column text-center"> --> 5 <div class="d-flex flex-column text-center"> 6 <!-- d-flex 指定 column縦並べ--> 7 <div class="row mx-auto"> 8 <div class="col-auto"> 9 <h1 class="font-blue display-3 font-weight-bold">HarborS for Beginner</h1> 10 <h3 class="font-blue display-5 mb-5 font-weight-bold">駆け出しエンジニア向けコワーキングスペース</h3> 11 12 <div class="home-text"> 13 <h2 class="display-5 font-weight-bold">現役エンジニアによる</h2> 14 <h3 class=""> 15 <!-- li要素のサイズ変更のため--> 16 <!-- <ul class="font-weight-bold"> --> 17 <ul> 18 <li>技術相談</li> 19 <li>キャリア相談</li> 20 </ul> 21 </h3> 22 <a style="font-size:35px;" href="#" 23 class="btn btn-lg active font-write mb-5 pr-5 ml-3 font-weight-bold" 24 role="button">話しを聞いてみたい</a> 25 </div> 26 </div> 27 </div> 28 </div> 29 </div> 30 </div>

![イメージ説明
イメージ説明

1枚目がデザインになり、2枚目の方が現状作成中のLPになります。
そこで質問があるのですが、1枚目のようにli要素の頭揃えが出来なく困っております。

今現在の作成中に対してどのようにしてli要素の頭揃えをすれば良いか教えていただきたいです。
大幅に変えなくてはならなくても問題ありません。

色々自分なりに試した結果出来なかったのでお手数になりますがよろしくお願い致します。

質問方法などに関しては少し大雑把のようになりますが詳細を上手く伝えることが出来ませんでした。
そこに関してはどのようにした方が良い質問になる!
なども良ければ教えていただけるととても嬉しいと思っております。

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

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

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

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

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

guest

回答2

0

ベストアンサー

これで、いかがでしょうか?

.home-text h3 { display: flex; justify-content: center; text-align: left; }

おそらく、どこかでtext-align: center;を指定していると思います。
リストの箇所だけ、中央揃えではなく左寄せにするために上記ソースコードのように
text-align: left;の追加が必要です。

(h3の子要素にulがあるのが適切かどうかは、調べてほしいです。)

投稿2020/03/09 03:39

編集2020/03/09 10:48
new1ro

総合スコア4528

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

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

shinpachi

2020/03/09 10:38

newさん初めまして! コメントありがとうございます! 上記に4枚目として写真を添付しました このようになった際はいかがすればよろしいでしょうか?
new1ro

2020/03/09 10:49 編集

説明が悪かったかもしれません。 > おそらく、どこかでtext-align: center;を指定していると思います。 > それを解除するためにtext-align: left;が必要です。 こちらについて、親要素の中央寄せの指定を、子要素では解除し左寄せにすることが必要、という意図でした。 つまり既存の「text-align: center;」は手を加えず 「.home-text h3」への指定に「text-align: left;」を追加すればOK、のはずです。 本文も編集します。
退会済みユーザー

退会済みユーザー

2020/03/09 11:29

heading/anchor系のタグはブロックタグは基本だめやね。
shinpachi

2020/03/10 13:06

お疲れ様です。 new1roさん 少しわからなくなってしまいましたのでhtmlを少し変更して再度新しく載せ直しました。 正直ここからどうすればli要素を頭揃えなるかわかりません。 もし変更出来そうであれば教えていただきたいです。
shinpachi

2020/03/10 13:08

お疲れ様です。 asahina1979さん 再度 html,css,写真に関して載せ直しています。 ここからどこが悪くどうすればliの頭揃えになるかわからない状況となっております。 もし良ければ教えていただきたいと思います。
new1ro

2020/03/10 13:23 編集

以下を追加してください。 .home-text h3 { display: flex; justify-content: center; text-align: left; } もしできなければ、CSSセレクタの詳細度を上げるか、 最悪「!important」を末尾に追加 (display: flex !important;)すると動くはず..、です。 意図通りの表示を実現できたら「!important」を消すためにどうしたらいいか、 などの検討をお願いします。 ----- こちらで動作を確認したURLは以下です。 https://codepen.io/new1ro/pen/abOEPmp HTML側はタイトルを「xxxxx」などの文字に変更した以外手を加えていません。
shinpachi

2020/03/10 14:53

new1roさんできました!!!!!!! 本当にありがとうございます。。。 現状としてもう一点li要素で頭揃えできない部分がありますがそちらは今回教えて教えていただいたのを参考にさせていただき作っていこうと思います。 引き続き再度別件でわからない部分がありそちらも質問させていただくと思いますのでお時間ある際にのぞいていただきお教えしていただけると幸いです。 お手数になりますがよろしくお願い致します。
new1ro

2020/03/10 15:00 編集

お役立ちできたようで、よかったです! あとは、asahina1979さんのおっしゃるとおり、 h3のなかにulがあるのはあまりよくないので、h3をdivなどに変えてクラスをつけて... ということを余裕があればやってもらえるといいかと思います。
shinpachi

2020/03/11 11:51

かしこまりました!! 微調整などする際にそちらもしっかり変更していきたいと思います!! 本当にありがとうございました!!! また質問させていただく時があると思いますがもしよろしければその時もよろしくお願い致します!!
guest

0

text-align: center で位置を調整ではなく margin: 0 auto; width : 200px; 等で調整しよう

投稿2020/03/09 03:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

shinpachi

2020/03/09 10:34

asahina1979さん初めまして! コメントありがとうございます! 上記をul要素、h3タグに追加して試してみましたがtopの3枚目のようになりました。 この場合はいかがすればよろしいでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問