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

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

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

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

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

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

HTML

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

CSS

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

Q&A

解決済

2回答

3083閲覧

CSSの右寄せ、中央、左寄せ配置に関して

gnx_vw903

総合スコア74

CSS3

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

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/01/01 14:01

ヘッダーを横幅100%にして
□ □ □ □を右寄せ
Twitterを中央
ツイートのボタンを左寄せにしたいと考えています。

ですが現状headerが途中から始まってしまっている状態です。

また、現在Bootstrapで行おうとしてるのですがなかなかうまくいきません。
他に良い方法はございますでしょうか?

よろしくお願いいたします。

(bodyをoffsetしてるのでheaderもつられて途中から始まっているのでしょうか?)

以下のようになっています↓
イメージ説明

index.html.erb

<div class="container_fluid"> <div class="row"> <header class="header"> <div class="flex_box"> <div class="col-md-5"> <p>□ □ □ □</p> </div> <div class="col-md-2"> <h2>Twitter</h2> </div> <div class="col-md-5"> <a href="/tweets/new" class="tweet_button">ツイート</a> </div> </div> </header> </div> <p><%= notice %></p> <div class="row"> <body class="col-md-offset-4 col-md-8"> <% @tweets.each do |tweet| %> <div class="tweet_header"> <p1> <%= tweet.name %> User_ID Time </p1> <p2> > </p2> </div> <p> <%= tweet.content %> </p> <tr> <td><%= link_to '詳細を確認する', tweet_path(tweet.id) %></td> <td><%= link_to "ツイートを編集する", edit_tweet_path(tweet.id) %></td> <td><%= link_to 'ツイートを削除する', tweet_path(tweet.id), method: :delete ,data: { confirm: '本当に削除していいですか?' } %></td> </tr> <% end %> </body> </div> </div>

twitter.scss

.header{ width: 100%; background-color: #7fffd4; } header ul li{ list-style-type: none; } body ul li{ list-style-type: none; } .flex_box{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-flow: nowrap; space-around: 3px; } a.tweet_button{ display: block; height: 30px; width: 120px; text-decoration: none; line-height: 33px; text-align: center; border-radius: 20px; color: #fff; -webkit-box-shadow: 1px 1px 1px #e9e9e9; -moz-box-shadow: 1px 1px 1px #e9e9e9; box-shadow: 1px 1px 1px #e9e9e9; background: #119de9; background: -webkit-gradient(linear, left top, left bottom, from(#119de9), to(#4bb8f3)); background: -moz-linear-gradient(top, #119de9, #4bb8f3); background: -o-linear-gradient(top, #119de9, #4bb8f3); background: -ms-linear-gradient(top, #119de9, #4bb8f3); background: linear-gradient(top, #119de9, #4bb8f3); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#119de9', endColorstr='#4bb8f3'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#119de9', endColorstr='#4bb8f3')"; } a.tweet_button:active{ /* クリックした時 */ -ms-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: none; } .new_tweet{ margin-left: auto; margin-right: auto; font-weight: bold; background: #e0ffff; border: solid 1px #000000; border-radius: 20px; } .new_tweet div { width: auto; text-align: center; } .new_tweet_header{ background: #ffffff; border-radius: 20px; } .new_tweet_header h2 { width: auto; display :inline-block; } .new_tweet_boby { width: auto; }

よろしくお願いいたします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/01/01 14:51

ボタンのブロックは 標準(左寄せ)なのでは?
guest

回答2

0

ベストアンサー

まあ大体こんなことかな?

ツイートボタンを右寄せ(左寄せてのは誤植だよね?)

ちなみに

text-(center|left|right) はtext-align: の設定値と同じ
col-((xs|xm|md|lg|xl)-)?([1-9]|1[0-2]) は 12分割した何個分を使うか

となります。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <div class="container"> <div class="row bg-info"> <div class="col-4 text-left px-1 py-2">カウント名</div> <h2 class="col-4 text-centerr px-1 py-2">Twitter</h2> <div class="col-4 text-right px-1 py-2"> <a href="#" class="btn btn-primary">ツイート</a> </div> </div> </div>

投稿2019/01/02 05:59

編集2019/01/02 12:33
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

gnx_vw903

2019/01/02 12:27

ご回答ありがとうございます。 実際のコード、とても参考になりました。ありがとうございます。
guest

0


□ □ □ □ → Twitter → ツイート


ツイート → Twitter → □ □ □ □

HTMLの記述順を逆にすると想定の順序になります。
順序が直った上で想定通りに動かない場合、
developer tool で HTMLの状態を確認しながら調整していくと良さそうに思います。

投稿2019/01/02 03:08

wilf

総合スコア300

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

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

gnx_vw903

2019/01/02 12:25

ご回答参考になりました。 CSSのコードの書き方が間違っていたみたいです。 ご回答いただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問