
No.2ベストアンサー
- 回答日時:
No1です。
>四角の中には、メニュー 1 、 メニュー 2... といったように入ります。
>それを再現できますか ?
それなら、メニューを主体としたHTMLにすべきでしたね。
とは言え、組み直すのは面倒なので、つぎはぎ的に処理してもよければ・・
1)div#hogeの直下(=子要素)に
<ul>
<li>メニュー1</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を作成してから、同じような方法で枠線等を描くようにした方が宜しいでしょう。
No.1
- 回答日時:
こんにちは
方法はいろいろあると思います。
極端な例としては、画像で作っておいて背景や画像として表示するとか。
(ご質問が「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>
完成を見ました。凄いですね。びっくりしました。
四角の中には、メニュー 1 、 メニュー 2... といったように入ります。
それを再現できますか ?
ただ、これだけでも凄い勉強になりました。
回答ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景画像の繰り返しについて
-
画像のビット数を変更する方法
-
C#で画像を他の画像に貼り付け...
-
画像のピクセルデータの取得
-
【EXCEL VBA】ダブルクリックで...
-
画像の一部だけが点滅する画像...
-
HTMLで画像をポップアップで表...
-
uwcs のマクロで画像認識をして...
-
画像を表示するには
-
画像の2次元フーリエ変換の結...
-
「using Windows」でエラーが出る
-
C# VisualStudioでプロジェクト...
-
画像の自動的入れ替えについて
-
EXCEL VBA 複数のImageコントロ...
-
画像の比較
-
UWSC 画像判定と条件分岐について
-
同じ画像を複数回表示させる
-
OpenCVを使った画像の切り抜き
-
openCVを用いた手形認識
-
HTML内に読み込んでいない画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像のビット数を変更する方法
-
背景画像の繰り返しについて
-
「using Windows」でエラーが出る
-
EXCEL VBA 複数のImageコントロ...
-
【EXCEL VBA】ダブルクリックで...
-
UWSC 画像判定と条件分岐について
-
Excel ユーザーフォームで表示...
-
VBAのユーザーフォームのイメー...
-
MFCでCImageListに画像追加失敗
-
gif 画像上の ボタンに リン...
-
画像のピクセルデータの取得
-
同じ画像を複数回表示させる
-
uwcs のマクロで画像認識をして...
-
UWSC 画像認識で条件分岐
-
vb.net 画像の透過について
-
UWSCでループ処理がうまくいき...
-
UWSC「画像が無い場合」
-
画像比較
-
uwscについての質問です。 画面...
-
生成AI画像について
おすすめ情報
これはメニューに使うものです。
メニュー 1 、 メニュー 2 といったような感じです。
説明足らずな文章と絵ですみません。