
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>を...
-
横並びのリストで左端がはみ出る
-
ulタグやliタグの中でbrタグ...
-
htmlの<ol>タグで、数字などを...
-
疑似クラス :activeが効きません
-
dlタグの中にdivは使える?
-
<li>の中の<h>だから!ルール違...
-
ulとliで囲った文字の一部を変...
-
htmlの文字が縦書きになる
-
ホームページの下にあるcopy ri...
-
ボタンをセル内一杯に表示させ...
-
訪問済のリンク色を変えない方法
-
既婚男女の方、結婚前と結婚後...
-
html の divとtable の役割
-
aの中にspan
マンスリーランキングこのカテゴリの人気マンスリー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>で改行する横並びのメニュー
-
ページ内リンク!?のしかた
-
イメージマップと画像のスライ...
おすすめ情報