質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

958閲覧

githubのプロフィールREADME.mdで配置した画像に隙間ができてしまう

egnoi

総合スコア5

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2022/08/11 17:31

前提

GitHubのプロフィールページを作成しているのですが、statsや使用言語等の画像を配置する際に、思い通りに配置できず困っています。
(HTMLは今まで触れてこなかったため初歩的な質問で誠に申し訳ございません)
現状↓

image

実現したいこと

上の写真のように、GitHub StatsとTotal Contributionsの間が空いてしまっているものを、下の画像のように、間を詰めて表示したいです。
image

該当のソースコード

README.md

1<img align="left" src="https://github-readme-stats.vercel.app/api?username=chokudai&count_private=true&show_icons=true" /> 2<img align="left" src="https://github-readme-stats.vercel.app/api/top-langs/?username=chokudai" /> 3<img align="left" src="https://github-readme-streak-stats.herokuapp.com/?user=chokudai" />

試したこと

HTMLのチュートリアルサイトを見て、<tr><td>タグを使ってみたのですが、私の理解度が十分ではなく「実現したいこと」に書いたようにはできませんでした。
どのように修正すればこれを実現することができるか、ご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Stats → Language の順にレイアウトされて、この2つが横並びになり、そして次の Streak は幅に入らないため改行されますが、Languageに高さがあるので、改行の結果、Stats の舌が余白になっているというだけのことですね。
マークダウンでブロックのレイアウトまではコントロールできないと思うので、しょうがないのでは?

とりあえず追記: あ、mdと言いつつhtmlで記述できるんですね。考え直してみます。

考え直してトライしてみた結果:

HTMLならこんな風にしてレイアウト可能です。

HTML

1<div style="display: flex;"> 2 <div style="display: inline-flex; flex-direction: column;"> 3 <img src="https://github-readme-stats.vercel.app/api?username=chokudai&count_private=true&show_icons=true" /> 4 <img src="https://github-readme-streak-stats.herokuapp.com/?user=chokudai" /> 5 </div> 6 <div style="display: inline-flex; flex-direction: column;"> 7 <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=chokudai" /> 8 </div> 9</div>

しかしこれをREADME.mdに書いても、正しくレンダリングされませんでした。
HTMLを「ある程度は」解釈してくれているようですが、やはり無理があるようですね。

投稿2022/08/12 01:09

編集2022/08/12 02:46
itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

egnoi

2022/08/12 06:41

itagagakiさま、ありがとうございます。 確かにVSCodeのプレビューでは正しく表示されているのに、readmeには反映されませんでした。 「ある程度」しか解釈してくれないのですね。難しい…。 重ねてにはなりますが、実際のHTMLもつけて回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問