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

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

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

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

HTML5

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

Q&A

解決済

2回答

3662閲覧

お問い合わせボタンの隣に電話番号と営業時間を並べたい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2016/11/19 10:15

編集2016/11/19 11:38

###前提・実現したいこと
お問い合わせボタンを右側に配置し、電話番号(上)と営業時間(下)に並べて、お問い合わせボタンの左側に配置したい。
CSS?をフロート?frexbox?どのようなものにすればよいでしょうか?
###発生している問題・エラーメッセージ

うまく回り込みができない

###該当のソースコード

<span class="header-tel"><i class="fa fa-phone"></i> <a href="tel:000-111-2222">000-111-2222</a></span><br /><span class="header-txt">受付時間 9:00~18:00</span> <a class="button" href="https://example.com/contact"><i class="fa fa-envelope-o" aria-hidden="true"></i>&ensp;お問い合わせ・ご相談</a>

###完成イメージ
0120-000-000 | お問い合わせボタン |
受付時間 9:00~18:00 | お問い合わせボタン |

※完成イメージではお問い合わせボタンが上下にありますが実際には一つです。
お問い合わせボタンのサイズが1としたら、電話番号と受付時間0.5ずつにないります。

.button { position: relative; background-color: #f39c12; box-shadow: 0 3px 0 #e67e22; border-radius: 4px; font-size: 16px; color: #fff; width: 247px; line-height: 42px; display: inline-block; text-align: center; text-decoration: none; } .button:active { top: 3px; box-shadow: none; } .button::before, .button::after { position: absolute; z-index: -1; display: block; content: ''; } .button, .button::before, .button::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .button:hover { opacity: 0.8; /* マウスオーバー時透明度を20%に指定 */ color: #fff; }

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

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

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

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

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

kei344

2016/11/19 11:16

具体的に現在のCSSを質問文に追記いただいたほうが回答を得られやすいと思います。
kei344

2016/11/19 11:30

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。よろしくお願いします。
guest

回答2

0

ベストアンサー

こんな感じではいかがでしょうか?

HTML

1<div id="contact"> 2 <p><strong><i class="fa fa-phone"></i> <a href="tel:000-111-2222">000-111-2222</a></strong> 3 受付時間 9:00~18:00</p> 4 <em><a class="button" href="https://example.com/contact"><i class="fa fa-envelope-o" aria-hidden="true"></i>&ensp;お問い合わせ・ご相談</a></em> 5</div>

CSS

1#contact { 2 display:inline-block; 3 width:auto; 4} 5#contact p { 6 float:left; 7 width:auto; 8 margin-right:テキスト右端からボタンまでのマージンpx; 9 text-align:left; 10} 11#contact p strong { 12 display:block; 13} 14#contact em { 15 display:inline-block; 16 float:right; 17 width:auto; 18}

class="header-tel"は#contact p strongに置き換え、
class="header-txt"は#contact pに置き換えてください。
<strong>タグの後には、<br>不要です。
contactには、Clearfixを当てます。
レスポンシブの場合は、スマホサイズで、#contact p,#contact emにfloat:none;を。

投稿2016/11/19 18:25

LibertyBell3

総合スコア1084

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

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

退会済みユーザー

退会済みユーザー

2016/11/20 05:05

早速ありがとうございます。気持ちよく並びました。
guest

0

HTMLの構造を変えないのであれば、例えば下記のようにすれば並ぶと思います。変える場合はその周りがどのようになるか、幅はどのようになるか、など考える要素が増えるので、もう少し詳細に書いてください。

CSS

1.header-tel { 2 display: block; 3 margin-bottom: -36px; 4} 5.button { 6 vertical-align: text-bottom; 7} 8```**動くサンプル:**[https://jsfiddle.net/rmkd0uew/](https://jsfiddle.net/rmkd0uew/)

投稿2016/11/19 11:38

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2016/11/19 12:03

kei344さま いろいろと理解不足なところで質問させていただいてますので、失礼がありましたらお許しください。 >HTMLの構造を変えないのであれば 私が書き込んだHTMLは見よう見真似で書いたものでコレが正しいか不明であり、完成されたイメージとしては「左側上に(電話番号)左側下に(営業時間)右側に(お問い合わせボタン)」になりますが、詳細の幅やマージンは決めていません(と、言うより考えていませんでした) もし、一般的な例としてお示しいただければ幸いです。細かな数値はこちらで変更したいと思います。
kei344

2016/11/19 12:11

> 一般的な例 正解はありません。私はパーツだけでサイトデザインをすることが無いので、ご期待には添えないようです、すいません。
退会済みユーザー

退会済みユーザー

2016/11/19 12:42

こちらこそご丁寧にあいがとうございます。 基本中の基本がわからないままサイト作りを始めたばかりに、質問内容も回答しにくいものになってしまいました。 この度はありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問