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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

HTML

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

CSS

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

Q&A

解決済

1回答

848閲覧

右寄せが効かないです。

fuyukixxx

総合スコア26

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/12 11:19

左上にある メニュバーを右側に寄せたいのですがjustify-content-end text-align-right float rightなどが効きません。
position absoluteはレスポンシブが崩れるのでしたくないです。どうすれば良いですか回答お待ちしております。

HTML

1コード<body> 2 3 <div class="wrapper bg-light"> 4 5 <header> 6 <!-- <h1 class="logo-title">Fuyuki Taniguchi portfolio</h1> --> 7 <div class="contents"> 8 <nav class="globalMenuSp"> 9 <ul > 10 <li><i class="fas fa-user"><a href="#profile">PROFILE</a></i></li> 11 <li><i class="fas fa-lightbulb"><a href="#skill">SKILL</a></i></li> 12 <li><i class="fas fa-tasks"><a href="#works">WORKS</a></i></li> 13 <li> <i class="fas fa-envelope"><a href="#contact">CONTACT</a></i></li> 14 </ul> 15 </nav> 16 <div class="navToggle d-flex"> 17 <span></span><span></span><span></span><span>menu</span> 18 </div> 19 </div> 20 </header> 21 </body>

CSS

1コード@charset "UTF-8"; 2* { 3 list-style: none; 4} 5 6* { 7 box-sizing: border-box; 8} 9 10* { 11 margin: 0px; 12 padding: 0px; 13} 14 15 16img { 17 max-width: 100%; 18 height: auto; 19} 20 21p { 22 font-weight: 500; 23} 24 25.wrapper { 26 margin: 0px auto 0px auto; 27 overflow: hidden; 28} 29 30header { 31 height: 900px; 32 background: url(img/steve-johnson-H68w9ML9PaM-unsplas2h.jpgのコピー.jpg)no-repeat center center; 33 background-size: cover; 34} 35 36@media (min-width:0px) { 37 nav.globalMenuSp { 38 position: fixed; 39 40 z-index: 1; 41 margin: 0 0 0 60%; 42 /* background: #fff; */ 43 color: hsl(9, 90%, 35%); 44 text-align: center; 45 transform: translateY(-100%); 46 transition: all 0.6s; 47 width: 70%; 48 49 50 } 51 52 nav.globalMenuSp ul { 53 /* background: #ccc; */ 54 margin: 0 auto; 55 padding: 0; 56 width: 30%; 57 flex-direction: column; 58 59 } 60 61 nav.globalMenuSp ul li { 62 font-size: 0.84em; 63 list-style-type: none; 64 padding: 0; 65 width: 50%; 66 border-bottom: 1px solid #333; 67 } 68 69 70 nav.globalMenuSp ul li:last-child { 71 padding-bottom: 0; 72 border-bottom: none; 73 } 74 75 nav.globalMenuSp ul li a { 76 display: block; 77 color: #000; 78 padding: 1em 0; 79 } 80 81 82 nav.globalMenuSp.active { 83 transform: translatey(14%); 84 } 85 86 .navToggle { 87 /* display: block; */ 88 position: fixed; 89 90 margin: 20px; 91 width: 42px; 92 height: 51px; 93 cursor: pointer; 94 z-index: 3; 95 background: rgb(150, 149, 149); 96 97 } 98 99 .navToggle span { 100 display: block; 101 position: absolute; 102 width: 30px; 103 border-bottom: solid 2px #eee; 104 -webkit-transition: .35s ease-in-out; 105 -moz-transition: .35s ease-in-out; 106 transition: .35s ease-in-out; 107 left: 6px; 108 } 109 110 .navToggle span:nth-child(1) { 111 top: 9px; 112 } 113 114 .navToggle span:nth-child(2) { 115 top: 18px; 116 } 117 118 .navToggle span:nth-child(3) { 119 top: 27px; 120 } 121 122 .navToggle span:nth-child(4) { 123 border: none; 124 color: #eee; 125 font-size: 9px; 126 font-weight: bold; 127 top: 34px; 128 } 129 130 131 .navToggle.active span:nth-child(1) { 132 top: 18px; 133 left: 6px; 134 -webkit-transform: rotate(-45deg); 135 -moz-transform: rotate(-45deg); 136 transform: rotate(-45deg); 137 } 138 139 140 .navToggle.active span:nth-child(2), 141 .navToggle.active span:nth-child(3) { 142 top: 18px; 143 -webkit-transform: rotate(45deg); 144 -moz-transform: rotate(45deg); 145 transform: rotate(45deg); 146 } 147}

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

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

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

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

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

guest

回答1

0

ベストアンサー

.navToggleに対して、right:0;にしたらどうでしょう。

投稿2020/05/12 11:28

okina

総合スコア471

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

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

fuyukixxx

2020/05/12 11:38

解決です。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問