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

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

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

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

CSS

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

受付中

要素の右寄せ固定方法

cn4433
cn4433

総合スコア3

HTML

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

CSS

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

1回答

0評価

0クリップ

153閲覧

投稿2022/01/25 03:53

前提・実現したいこと

下記画像①のマイページボタンを図のようにwidth800pxに合わせて右寄せ固定したい
イメージ説明

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

800pxの範囲内で右寄せされず中央や範囲外にでてしまう

ソースコード

  • HTML
<div class="headbtn"> <p>※予約変更、キャンセルはこちら</p> <a href="https://www.~~~" class="header_top">マイページ</a> </div> </div> <div class="wrapper"> <div class="top"> <!-- <a href="https://www~~~p" class="header_top"><img src="./complete_files/van.png"></a> --> <h1 class="tenpo">VAN COUNCIL SELECT</h1> </div> <div class="naiyou"><span>ご予約ありがとうございました</span></div> <div class="regi_conp"> <div class="regi_conp_1"> <p>予約が完了しました<br>キャンセルはマイページから行えます</p> </div> </div> <div class="seni"><a href="https://www~~~">マイページへ</a></div> </div>
  • CSS
.header { width: 800px; margin-left: auto; display: flex; justify-content: space-between; background: #ffffff; z-index: 9999; } .headbtn { width: 25%; line-height: 30px; margin-right: auto; margin-left: auto; text-align: center; } .headbtn p { font-size: 13px; margin-top: 20px; margin-bottom: 5px; } p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .headbtn a { display: block; margin-left: auto; width: 60%; text-decoration: none; background: #3F85B5; text-align: center; border: 2px solid #3F85B5; color: #FFFFFF; font-size: 15px; font-weight: bold; border-radius: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; transition: all 0.3s ease; } a { outline: none; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }

試したこと

margin-left:auto で右寄せ
justyfy-content の右寄せ

ここに問題に対して試したことを記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2022/01/25 04:58 編集

ご提示のHTMLに .header がありませんが、ご提示のコードが .header 直下、という理解で合っていますか?

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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