重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

詳しい人求む！

HTML 、 CSS ではみ出る線の表現

解決済

  • 質問者：i-d-a-i
  • 質問日時：
  • 回答数：2件

添付画像のように、 CSS で、はみ出た線を表現出来ますか ?
画像の線はゆらゆらしてますが、真っ直ぐの線と考えてください。

詳しい方、教えてください。

「HTML 、 CSS ではみ出る線の表現」の質問画像

質問者からの補足コメント

  • これはメニューに使うものです。
    メニュー 1 、 メニュー 2 といったような感じです。
    説明足らずな文章と絵ですみません。

      補足日時：2022/11/16 12:54
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No1です。



＞四角の中には、メニュー 1 、 メニュー 2... といったように入ります。
＞それを再現できますか ?
それなら、メニューを主体としたHTMLにすべきでしたね。
とは言え、組み直すのは面倒なので、つぎはぎ的に処理してもよければ・・

1）div#hogeの直下（＝子要素）に
<ul>
<li>メニュー１</li>
<li>メニュー2</li>
</ul>
を追加。

2）CSSに
#hoge ul {
list-style-type: none;
width: 70%; height: 100%;
padding:0; margin-left: 15%;
display: flex;
justify-content: space-around;
align-items: center;
}
を追加。

することで、雰囲気的にはそんな感じになるかと。

「可能」という意味だけのつぎはぎなので、実際には、きちんとしたHTMLを作成してから、同じような方法で枠線等を描くようにした方が宜しいでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

実現可能であることがわかりました。
そして、勉強になりました。

回答ありがとうございます。

通報する
お礼日時：2022/11/17 10:07

参考程度に

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



方法はいろいろあると思います。
極端な例としては、画像で作っておいて背景や画像として表示するとか。
（ご質問が「CSSで」となっているので、多分これは違うのでしょうけれど・・）

CSSで考えるなら、要素の枠線を利用したり、細長いブロック要素を塗りつぶして配置するとか・・
HTMLの構成や実際に何を意味するものなのか不明なので、以下は形だけそれっぽくしたみただけですが、DIV要素ふたつを用いて、枠線の表示で似たものを作ってみた例です。

※ 枠線の色を変えてみれば、何が何を指定しているかわかるでしょう。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#hoge { width: 400px; height:100px; }

#hoge {
position: relative; margin:100px auto;
border: 0 solid black; border-width: 0 4px 4px 0;
}
#hoge::after {
position: absolute; content: "";
top: 0; left: -30%; width: 130%; height: 0;
border-top: 4px solid black;
}
#hoge>div {
position: absolute; top: -20%; left: 15%;
width: 70%; height:140%;
border: 0 solid black; border-width: 0 4px;
}
#hoge>div::after {
position: absolute; content: "";
top: -20%; left: 0; width: 50%; height: 140%;
border-right: 4px solid black;
}
</style>

</head>
<body>
<div id="hoge"><div></div></div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

完成を見ました。凄いですね。びっくりしました。

四角の中には、メニュー 1 、 メニュー 2... といったように入ります。
それを再現できますか ?

ただ、これだけでも凄い勉強になりました。

回答ありがとうございます。

通報する
お礼日時：2022/11/16 13:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報