Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9004

【Qiita】記事で画像を横並びにする

$
0
0

言語, 記法: HTML, Markdown
画像サイズ: 128×128 px
横並びになった画像はスクリーンサイズによって、縦並びになる。

本文

youtube_social_square_red.pngTwitter_Social_Icon_Square_Colorのコピー.png

書き方:空白を入れずに後ろに画像をドラッグ&ドロップ

![](https://~~~.拡張子)![](https://~~~.拡張子)
![youtube_social_square_red.png](<a href="https://t.co/I9eMMgpS8P?amp=1">https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png</a>)![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)

HTML

書き方:画像を記事に一度ドラッグ&どドロップして、画像URLをコピーし、imgタグに入れる。

<imgsrc="画像URL"><imgsrc="画像URL">
<imgsrc="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png"><imgsrc="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">

画像と画像の間にスペースを開けたい時

 

改行せずにタグとタグの間にスペースを入れます。半角、全角スペースの数に応じて広がります。

<imgsrc="画像URL"><imgsrc="画像URL">

画像サイズを指定する

 

img要素に width="" と height="" を追加すると、画像のサイズを指定することができます。
""や単位はあった方が丁寧。使える単位は%,px,em,rem,

<imgsrc="画像URL"width="123"height=456px><imgsrc="画像URL"width=123%height=200rem>

横に並べた画像の位置を調整する(残念なやり方)

text-align:center やfloat:right などのcssは効きませんでした。分かり次第修正します。

&nbsp;をひたすら並べる。nbspは「non-breaking space」の略です。 は半角スペース分のスペースをあけることができますが、以下のような特殊記号を使ってもスペースをあけることができます。

「&nbsp;」は通常の半角スペースと同じサイズの空白文字。
「&ensp;」はそれより少し広めの空白文字。
「&emsp;」はさらに広めの空白文字。
「&thinsp;」は、最初の「 」よりも狭い(細い)空白文字です。
【HTML入門】文章中にスペース(空白文字)を入れる3つの方法とは?より引用

<divalign="center"><imgsrc="画像URL">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<imgsrc="画像URL">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<imgsrc="画像URL"></div>

<table>

<table><tr><td><imgsrc="画像URL"></td><td><imgsrc="画像URL"></td><td><imgsrc="画像URL"></td></tr></table>

 

Markdown (table)

YouTube 128×128Twitter 128×128
youtube_social_square_red.pngTwitter_Social_Icon_Square_Colorのコピー.png
|テキスト|テキスト|
|---|---|
|ドラッグ&ドロップ|ドラッグ&ドロップ|
|YouTube 128×128|Twitter 128×128|
|---|---|
|![youtube_social_square_red.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png)|![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)|
youtube_social_square_red.pngTwitter_Social_Icon_Square_Colorのコピー.png
YouTube 128×128Twitter 128×128
|ドラッグ&ドロップ|ドラッグ&ドロップ|
|---|---|
|テキスト|テキスト|
|![youtube_social_square_red.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png)|![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)|
|---|---|
|YouTube 128×128|Twitter 128×128|

おまけ 左寄せ 中央寄せ 右寄せ

:youtube_social_square_red.pngTwitter_Social_Icon_Square_Colorのコピー.pngqiita-squareのコピー.png

最後に

QiitaはTex記法で画像を挿入できないのか...

以上、Unityゲーム王国、騎士ロボットVTuberのKoshiがお送りしました!

†■━ †■━ †■━ †■━ †■━ †■━ †■━
もし、この記事が役に立ったら、
いいね」「ストック
押してね🗡💗

自己紹介

全地球6億人のロボカッケー皆さんコンバトラー†[□ □]■━
私は王国騎士ロボットVTuberのKoshiだ🗡💥

私のステータスだ⚔共にこの世界を救おう
Twitter⚔ twitter.com/Koshi_Vtuber
YouTube⚔ t.co/I9eMMgpS8P?amp=1
niconico⚔ nicovideo.jp/user/90553212
bilibili⚔ space.bilibili.com/476988586
公式HP⚔ koshi-4092b.firebaseapp.com

【参考】
Githubのmarkdownででかい画像のサイズを調整するには
https://qiita.com/chezou/items/b62053636fb62a8b62a5
画像を横に並べる 画像 並べ方
http://yume.hacca.jp/koiki/gazo/yoko.htm
【HTML入門】文章中にスペース(空白文字)を入れる3つの方法とは?
https://www.sejuku.net/blog/50748#i-3


Viewing all articles
Browse latest Browse all 9004

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>