最近、自分のGitHub Profile READMEを整理した。
そのときの学びを雑に書く。
tl;dr
- Awesome GitHub README で参考例を先に見てみる
- デザインするときは極力alignは使わないでtableタグを使う
- 画像に対して必ずaタグで囲う
- 代替文字でフォントを変更する
-
<code>でアイコンにデコレーション
1) awesomeを参考にする
タイトル通り。AwesomeシリーズにGitHub Profile READMEもあるのでまずはここを適当に見てみることを勧める。
2) 全体レイアウトはalign ではなくて tableでする
左右に配置したいときにはalignを使うことで要素のfloatをしてあげることができる。
<img align="right" src="..." alt="..." />
<p align="left">hello</p>
ただあくまでFloatなので「小さい画像＋長文」をひとまとめにしたい場合に使うほうが無難。
自分は最初、alignを使って全体のレイアウトを整えようとしてたけど思ったとおりの動きをまるでしてくれなくて頭がおかしくなりそうになった。
もちろん、これで全体のレイアウトをデザインしてあげることもできるけど個人的にはおすすめしない。
READMEをオシャレに書く必要があってデザインするためmarkdownにHTML書いてalign="left|center|right"プロパティ追加するとfloatされるからこれでいけるかと思ったら、まるで思った通りに動いてくれないんで発狂しかけた。結局、tableタグ系で整理してあげるのが一番良いという学び。
— Nash⚡️北米にいる (@snamiki1212) February 26, 2021
全体のレイアウトはTableで整えてあげること。
valign Tableの縦方向の調整
table要素で縦方向の調整をしたいときは、valign要素を入れてあげればよい。
<table>
<td valign="center">hello</td>
</table>
3) 画像に対してはaタグで囲ってあげる
GitHub Profile READMEというかMarkdownの仕様なのか、画像・GIFなどのメディアをシンプルに表示してもPureなHTMLなどと違ってデフォルトでオンクリック可能なリンクになっている。リンク先はそのメディアのURL。
Webページという観点におけるUXとしては、リンクをクリックするときのユーザーの期待値は「きちんとしたWebサイトへジャンプする」なので、画像などを貼るときは必ずaタグでリンク先を自分でコントロールしてあげること。
リンク先がない場合の回避
そのメディアに対して該当するリンク先がない場合は、最低でも<a href="#">...</a>で囲ってあげて、ダミーの内部リンクに差し替えてあげる。
これで少なくとも無駄なジャンプは防げる。
4) UTF-8でフォントを変更する
前提として、GitHubのREADMEではフォントを指定できない。styleプロパティを指定しても無視される。
それでも、こんな感じのものを作れる。
（UTF-8自体に詳しくないしあんまり調べてないけど、UTF-8周りの機能なのか？とりあえず、仕組みはわかってないけど実現できることがわったので、誰か知ってる人いればマサカリ投げてください。）
下記のサイトとかを使ってテキストを取ってきて自分で文章を作成したものをコピペすれば良い。
注意点としてメンテナンス性がかなり下がしデザインもうまくやらないとダサい。ワンポイントとして使うところを絞ったほうが良さそう。
5) codeでアイコンをデコレート
細かいTipsだけど、イメージに疑似シャドウをつけるHackなTips。
「⇐左」が<code>でアイコンイメージを囲ったケース、「右⇒」は特になし。
おわりに
完璧ではないがある程度は満足出来る状態のProfile画面になったので良き。