昨日、面接でコード見せてよと言われて焦ったので顔であるsota1235.comをいじいじ。

とはいってもCSS苦手なので少しずついじいじ。

日進月歩というじゃないですか。

TwitterとFacebookとGithubのリンクをアイコン化しました。

アイコンはこちらから頂いた → Simple Icons

こういうアイコンって意外とないのよね…

HTMLのリンク部分にclassを追加

[index.html]

              <a href="https://twitter.com/sota1235" class="twitter">Twitter</a>
              <a href="http://facebook.com/sota.sugiura" class="facebook">Facebook</a>
              <a href="https://github.com/sota1235" class="github">GitHub</a>
              

んでCSSにスタイルを追加

[style.css]

.twitter {
                display: block;
                width: 64px;
                height: 64px;
                float: left;
                background-image: url("path");
                text-indent: -9999px;
              }
              
              .facebook {
                display: block;
                width: 64px;
                height: 64px;
                float: left;
                background-image: url("path");
                text-indent: -9999px;
              }
              
              .github {
                display: block;
                width: 64px;
                height: 64px;
                float: left;
                background-image: url("path");
                text-indent: -9999px;
              }
              

a要素の文字はindentに-9999pxを指定することで無理やり避難。

同じ物を３つ書いちゃって、普通にスマートでないので整理したら動いたのでこうした。

[index.html]

              <div id="sns">
                <a href="https://twitter.com/sota1235" class="twitter">Twitter</a>
                <a href="http://facebook.com/sota.sugiura" class="facebook">Facebook</a>
                <a href="https://github.com/sota1235" class="github">GitHub</a>
              </div>
              
              

[style.css]

#sns a{
                display: block;
                width: 64px;
                height: 64px;
                float: left;
                text-indent: -9999px;
              }
              
              .twitter {
                background-image: url("path");
              }
              
              .facebook {
                background-image: url("path");
              }
              
              .github {
                background-image: url("path");
              }
              

圧倒的にすっきり。

今日はとりまここまで。

---

※この記事は WordPress に投稿した記事を変換したものです。一部不自然な表示があるかも知れません。ご了承ください。また、記事タイトル先頭の * は WordPress から移行した記事である印です。