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

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

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

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

CSS

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

Q&A

解決済

1回答

339閲覧

HTML,CSS flex要素内・外に画像ファイルを挿入

kgnmakl

総合スコア12

HTML

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

CSS

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

1グッド

0クリップ

投稿2023/05/09 05:53

編集2023/05/09 06:05

実現したいこと

画面中央に配置したflex要素の内側と外側に画像を配置したい。
KNT(それぞれ別ファイル)という画像をflex要素として中央に配置しました。
橙色の長方形要素に接する形で画像ファイルを挿入したいです。目指すイメージは下記のサイトで示す通りです。

前提

下記のサイトを参考にHTML,CSSの学習を行なっています。
https://takeshioide.com/

上記のサイトでは左右のWORKS, ABOUTにカーソルを合わせるとそこにaタグによって次の画面に遷移する仕様になっています。デベロッパーツールで仕様を確認しましたが、中央の要素がflexで配置されており、そこに2分した画像ファイルを回転?させて配置していると思われます。

CSSで

CSS

1img { 2 overflow-clip-margin: content-box; 3 overflow: clip; 4}

という記述があり、これが上記の仕様を可能にしているのではないかと考えました。
しかし、単にこれを模倣するだけでは実現できず、他の方法を模索しています。代替案もしくは上記サイトの詳細がわかる方がいらっしゃるようでしたら、ご教授願います。

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

エラーメッセージ

該当のソースコード

html

1<body> 2 <div class="home-container"> 3 <div class="style"> 4 <div class="greeting mt-5"> 5 <div class="greeting greeting-text">Hi, I'm KNT. A Web Designer.</div> 6 <span class="greeting greeteng-border">|</span> 7 <span class="greeting greeting-contact">CONTACT</span> 8 </div> 9 </div> 10 11 <div class="home-nav-wrapper"> 12 13 14 <div class="home-name my-5"> 15 <div class="home-name-img k"> 16 <img src="static/img/K.png" alt> 17 </div> 18 19 <div class="home-name-img n"> 20 <img src="static/img/N.png" alt> 21 </div> 22 23 <div class="home-name-img t"> 24 <img src="static/img/T.png" alt> 25 </div> 26 27 </div> 28 29 </div> 30 31 <div class="side_bar"> 32 <a href="#"> 33 <div class="nav out-side works" id="out-works"> 34 <img src="static/img/WORKS.png" alt> 35 </div> 36 <!-- <div class="nav in-side works" id="in-side-works"> 37 <img src="static/img/WORKS下.png" alt> 38 </div> --> 39 </a> 40 </div> 41 42 43 44 45 46 47 48 </div> 49 50 51 52</body> 53</html> 54

CSS

1.greeting{ 2 display: inline-block; 3} 4 5.style{ 6 text-align: center; 7} 8 9.home-nav-wrapper{ 10 background-color: bisque; 11 margin-top: 3%; 12 margin-left: 10%; 13 margin-right: 10%; 14} 15 16.home-name{ 17 display: flex; 18 justify-content: center; 19 /* margin-left: 15%; 20 margin-right: 15%; */ 21} 22 23.home-name-img{ 24 margin: 10%; 25} 26 27.home-name-img img{ 28 height: 130%; 29} 30 31img{ 32 overflow: clip; 33 overflow-clip-margin: content-box; 34}

結果は下に示す通りです。
イメージ説明

試したこと

overflow: clip;
overflow-clip-margin: content-box;
について調べましたが、参考にできるサイトがあまりなく、理解できませんでした。

補足情報(FW/ツールのバージョンなど)

Visual Studio Codeを使用しています。

hatena19を押しています

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

int32_t

2023/05/09 06:00

質問文から何を実現したいのかが不明瞭でした。画像を回転させて配置すること、ですか?
kgnmakl

2023/05/09 06:06

コメントありがとうございます。訂正しました。 KNT(それぞれ別ファイル)という画像をflex要素として中央に配置しました。 橙色の長方形要素に接する形(内側、外側)で別の画像ファイルを挿入し、それらにaタグを付与したいです。 目指すイメージは下記のサイトで示す通りです。 https://takeshioide.com/

回答1

0

ベストアンサー

overflow overflow-clip-margin は関係ありません。ブラウザの開発者ツールで見ると user agent stylesheet で指定されているものだとわかるかと思います。何もしなくても設定されているプロパティです。

参考サイトと同様にするなら、.side_bar に対して position: absolute transform: rotate(-90deg) transform-origin: 0 0 を設定し、さらに top プロパティと left プロパティでうまいこと配置してください。参考サイトの class="home-nav-wrapper works enter" の要素のスタイルが参考になります。

投稿2023/05/09 06:13

int32_t

総合スコア19591

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.69%

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

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

質問する

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

HTML

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

CSS

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