🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

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

CSS

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

Q&A

解決済

1回答

1305閲覧

前回の引き続きです。画像が左端に寄せられません。また文字列のEnglishリンクタブの図v←これがどうすれば良いか分からないです

JUN2938

総合スコア4

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/02/21 14:23

編集2021/02/21 14:26

こちらのサイトの模写を行っていました。
https://iyell.co.jp/business/loancenter/
画像を左端に寄せようとmargin-rightで頑張ってみましたが、数を増やしてしまうと画像が大きくなり変になってしまいます。
また文字列のEnglishリンクタブの図v←この小さvのやり方が分からないです。

HTML

1<body> 2 <!-- startヘッダー ---------------------------------------------------------> 3 <header class="header-login"> 4 <div class="container header-flex"> 5 <!-- ロゴアイコン------------------------------------------------- --> 6 <div class="logo-header"> 7 <img src="img/logoK.png" alt="logo" /> 8 </div> 9 <!-- ロゴライン--------------------------------------------------- --> 10 <div class="logo-line"> 11 <ul class="ul-line"> 12 <li class="house-icon"><img src="img/ico-homeK.gif" alt="house" /></li> 13 <li>経営方針</li> 14 <li>プラットフォーム</li> 15 <li class="a-line"><a href="#">サービス</a></li> 16 <li>メンバー</li> 17 <li>アソビゴコロv</li> 18 <li>会社情報v</li> 19 <li class="link">採用サイト<img src="img/リンク.png" alt="リンク" /li> 20 <li class="link">English<img src="img/リンク.png" alt="リンク" /li> 21 </ul> 22 </div> 23 </div> 24 </header> 25 <!-- endヘッダー ---------------------------------------------------------------> 26 <!-- main start -------------------------------------------------------------------> 27 <div class="topface"> 28 <img src="img/topface.png" alt="パソコン" /> 29 <ul class="topface-line"> 30 <li class="top"><a href="#">【在宅ローンテック iYell(イエール)株式会社】></a></li> 31 <li class="middle"><a href="#">サービス</a></li> 32 <li>不動産事業者向け在宅ローンテック</li> 33 34 </ul> 35 </div>

css

1.container { 2 max-width: 1200px; 3 margin: 0 auto; 4 } 5 6 /* ヘッダー */ 7 8 .header { 9 padding: 0 40px; 10 color: #000; 11 background-color: #fff; 12 } 13 14 /* ロゴライン   */ 15 16 .header-flex { 17 display: flex; 18 justify-content: space-between; 19 white-space: nowrap; 20 margin: 0 auto; 21 } 22 23 .logo-header img { 24 margin-right: 300px; 25 } 26 27 .house-icon { 28 width: 10%; 29 } 30 31 .logo-header img { 32 width: 50%; 33 text-align: left; 34 } 35 36 .logo-line header-login { 37 padding: 17px 1em; 38 vertical-align: middle; 39 } 40 41 .ul-line { 42 display: flex; 43 align-items: center; 44 margin-left: 250px; 45 } 46 47 .ul-line li { 48 list-style: none; 49 font-size: 15px; 50 margin-left: 30px; 51 } 52 53 /* main */ 54 55 .topface img { 56 width: 100%; 57 }

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

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

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

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

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

Lhankor_Mhy

2021/02/22 05:02

ご提示のコードを試してみましたが、logoK.png は左に寄っているように見えました。 なにが問題なのかをもう少し詳しく説明いただけますか?
JUN2938

2021/02/22 10:07

mail1210 確認しながらやっていましたが、この記述がすべてではないと思っていたので他のやり方はないのかなと探していました。 Lhankor_Mhy 自分のデスクトップの画面だとまだ左端に寄せられると感じましたのでこちらに投稿しました。
guest

回答1

0

ベストアンサー

ロゴについては、.containerについているmax-width: 1200px;を削除してみるだけでもロゴは左に寄るのではないでしょうか。

「Englishリンクタブの図v」については、模写元のサイトではこうなっていますね。
イメージ説明

aタグの疑似要素:afterに対して「∨」を表示する記述になっています。

その他の方法だと、CSSかSVGで描く等でしょうか。どちらにしろ疑似要素afterを使うケースが多いと思います。

【CSS】CSSのみで三角と矢印を作る方法
画像を使わない!CSSだけで矢印を作る方法【初心者向け】

投稿2021/02/22 10:34

mai1210

総合スコア272

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

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

JUN2938

2021/02/22 10:39

ご丁寧にありがとうございます。 やってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問