windows8とGitHubとFont Awesome




プロクラス森です。普段は主にWEB制作をしています。最近覚えたものをいくつかメモ。

■Windows8でデスクトップに戻る時

1

仕事用のPCが新しくなり、OSがWindows8になりました。 ですが、タイルメニューの画面になかなか慣れません。 見慣れたデスクトップが恋しい…

「Windows8の操作分からない」

「試しに押す」

「知らない画面出る」

「パニック」

初日はこのループに陥っていたのですが、デスクトップに戻る方法が分かってから、Windows8を恐れる事はなくなりました。

昔ながらのショートカット Windowsキー+D(デスクトップを表示)で デスクトップ画面に帰れます。

そしてこれは「Windows8を覚えた」と言えません。 …それでもやっぱり慣れた環境から、なかなか動くことができません…。 大変申し訳ございません…。

■GitHubとSourceTree

0

GitHub SourceTree

それまで使っていたSVNに代わって社内に導入されましたが、億劫でずっと使ってませんでした。 その後プログラマとデザイナーで1つのHTMLを修正する作業があり、締め切りまで後1週間になった時、作業効率を求めて遂に使い始めました。

最初は何度か躓きましたがじきに慣れました。 プログラマとデザイナーで1つのHTMLを修正するような場合には便利です。

2

プッシュやプルをしようとしてエラーになる事が何度かありますが、これは「先にコミットとフェッチをしてから!」という事らしいです。 なのでとりあえずコミットとフェッチをガンガン押すと先に進めました。

今までSVNを使っていた為、   送信 = 「コミット」 受信 = 「更新」   だったのですが、SourceTreeは   送信 = 「コミット」して「プッシュ」 受信 = 「フェッチ」して「プル」   という、2段階のアクションとなっています。

SVNと違い、ローカル(自分のPC)とリモート(GitHubをインストールしたサーバー)それぞれにリポジトリ(管理する仕組み?)を持つ為、より履歴の管理が便利らしいのですが、今のところはコミットしたら迷わずプッシュ フェッチしたら迷わずプルと、SVNと同じように使っています。

  3

最初は不安だったのですが、複数人で同じファイルを触っていてもバッティングせず、問題なくマージされてました。

※マージされた箇所はSourceTreeの右下で色が変わって表示されます。

いい気になってガンガンプッシュしていたところ、エラーが…。エラーを気にせずプッシュしてみたところ、HTMLファイルの中に変な文字が入ってしまいました。どうやら他の人と変更箇所がバッティングしたようです。

同じ箇所(行)に変更があった場合は流石にマージできないらしく、バッティングした両方の内容がどちらも残った状態になっています。入ってしまった変な文字というのはバッティング箇所を示しているコメント文でした。

この場合はファイルを開き、バッティング箇所を探して、重複しているどちらかを消すか、手作業でマージして次の作業を進めればOKです。

■アイコンフォント Font Awesome

6

メールのアイコンや写真のアイコンなど、何かと使う機会の多いアイコンなのですが、フォントの一つとして:before :afterのcontentで表示できるのでとても楽です。

Twitterのホーム画面に表示されるメールのアイコンが、マウスオーバーの時きれいに色が変わるので、どうやっているのだろうとソースを見てみたところ知りました。

アイコンフォントはいくつかあるらしいのですが その中のFont Awesomeというものを使っています。

Font Awesome

使い方はこちらのサイト様を参考にしました。

このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootst...

fontファイルとcssをダウンロードして設置する形と、ヘッドにコードを書く方法とありますが、その後はcssでアイコンを表示させることができます。

アイコンの種類は本当にたくさんあって、良いのですが、これだけあると探しているものを中々見つけられない事もよくあります。   printなど、名前検索して見つかる物もあるのですが、思った名前とは違うものも多く、名前をつけるのは確かにたいへんだなあと思います。 メールアイコンが中々見つからなかったのですが、こちらのサイト様に分かりやすいまとめがありました。

たくさんのWEBアイコンフォントが使えるFontAwesomeですが、種類が豊富故に『あのアイコン使いたいけど名前なんだっけ・・・』ということも増えてきました。htmlコードと、擬似要素で使いたい場面もあると思うのでcontentで指定する文字コードもまとめていきます!

(メールは envelope という名前でした…)

フォント扱いの為拡大しても劣化せず、cssで色やサイズを変えれて使い勝手が良いです。 拡大しても劣化しない形式としては、フォント以外にもSVG画像など色々あるそうで、今後の主流がどうなるのかは分からないのですが、画像サイズを気にせずアイコンが表示できて便利です。