
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは
>どのようなコードになりますでしょうか?
定型のものが決まっているわけではないと思います。
まず、文章の内容に合ったマークアップを行います。
それに合わせて、CSSでレイアウトすれば良いです。
左右、中央に並べる方法は、text-align:center;でセンター寄せしておいて、左右のものをfloat:left/right;で表示するとか、position: absolute;にして直接位置指定するとか、いろいろあると思いますが、以下はflexboxを利用した一例です。
マークアップをどのようになさりたいのかがご質問文からはわからないので、とりあえずul、liのリスト形式にしています。
画面のサイズによって、画像サイズや、テキスト+画像のひとまとまりをどのように制御なさりたいのかも不明なので、そのあたりも適当です。
(画面サイズに関わらず、常に横並びになることを想定)
・・・ということで、あまたある中の一例として…
【 HTML 】
<ul id="test">
<li>
<figure><img src="A.jpg" alt="" />
<figcaption>テキスト11111</figcaption>
</figure></li>
<li>
<figure><img src="B.jpg" alt="" />
<figcaption>テキスト22222</figcaption>
</figure></li>
<li>
<figure><img src="C.jpg" alt="" />
<figcaption>テキスト33333</figcaption>
</figure></li>
</ul>
【 CSS 】
#test, #test * { margin: 0; padding: 0; }
#test { list-style-type: none; display: flex; justify-content: space-between; }
#test li { max-width: 33%; }
#test img { width: 100%; }
※ flexboxに関しては、以下あたりが参考になるかと思います
http://coliss.com/articles/build-websites/operat …
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
【Html CSS】<a>の上に文字を配...
-
ドロップダウンメニューが隠れ...
-
<ul><li></li></ul>にするメリ...
-
HTML ul li で横並びにナビゲー...
-
画像はDIVタグとPタグの両方で...
-
リストマーカーをボックス内に...
-
CSSで改行後の行間調整
-
HTML属性での「""」 「''」違い
-
投稿フォームの整列
-
htmlの文字が縦書きになる
-
1時間30分を簡単に表したいで...
-
CSSを使って定型文を挿入できま...
-
既婚男女の方、結婚前と結婚後...
-
訪問済のリンク色を変えない方法
-
CSSで画像を同じ位置に重なり合...
-
HTML の繰返し法???
-
pythonでのカーソル移動がずれる
-
floatタグの使い方
-
brにクラスをつけてcssでdispla...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
html/cssの、navを2段にする...
-
list-style-type部分だけ大きく...
-
複数行にまたがる括弧を表示し...
-
html <li>の中の文字一部に色を...
-
ページを開いているときのリン...
-
番号付きリスト(<Ol><Li>・・...
-
リストを2つに分割して、それぞ...
-
リストの左余白の削除方法
-
html <ul></ul>の並びで一行空...
-
<li>タグの数が増えすぎたので...
-
<ul><li></li></ul>にするメリ...
-
css 横並びのナビゲーションバ...
-
htmlの<ol>タグで、数字などを...
-
<li>で改行する横並びのメニュー
-
ページ内リンク!?のしかた
-
イメージマップと画像のスライ...
おすすめ情報