こんにちは。
ご無沙汰しております。
腹黒へっぽこエンジニアのYです。
今回はいつもお世話になっているものを紹介します。
先に書いておきますが、若干マニアックな内容になります。
Yは「マークアップエンジニア」という呼び名だけ少しばかり格好良く聞こえる肩書きです。
マークアップエンジニア(コーダー、フロントエンドエンジニアと呼ぶところもありますね…)は
読んで字の如くマークアップという作業を行っています。
[“引用：マークアップ とは、人間語が認識出来ない機械でも文書の構造が認識出来るように、
文書の各要素に目印を与えて行く事です。
見出しや段落などと言った紙の文書では当り前にある要素だけでなく、
ハイパーリンクのアンカーなどのようなハイパーテキスト独自の要素なども、
マークアップに依り認識が可能になります。”]上記の通り、ただ文字を打ってれば正しく表示されるってものではありません。
一日の間に使用している文字数はきっと社内の誰よりも多い筈…
極力、時間短縮・要領良くこなすことを念頭に置いているので、
「手間の掛かること・時間の掛かること」=「無駄なこと」
という考えで動いています。
【1】時間短縮の為にお世話になっているツールまずはこちらをご覧下さい。
【イリオワン様スマホサイト：トリミング料金】
http://poopet.com/mob/price/こちらのページにある「コース内容」「基本コース」「オプション」
というボタンですが、画像は使わずCSSのみで生成しています。
因みに中身はこんな状態です↓
margin-bottom:0.2em;
cursor:pointer;
display:block;
font-size: 2em;
color: #fff;
font-weight:bold;
padding: 0.5em 0.8em;
text-align:center;
background: -moz-linear-gradient(
top,
#46b000 0%,
#225902);
background: -webkit-gradient(
linear, left top, left bottom,
from(#46b000),
to(#225902));
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;
border:0.1em solid #258505;
-moz-box-shadow:
0 0 0 rgba(33,122,15,0),
inset 0 0.1em 0.1em rgba(255,255,255,1);
-webkit-box-shadow:
0px 0px 0px rgba(33,122,15,0),
inset 0 0.1em 0.1em rgba(255,255,255,1);
box-shadow:
0px 0px 0px rgba(33,122,15,0),
inset 0 0.1em 0.1em rgba(255,255,255,1);
text-shadow:
0 -0.1em 0 rgba(000,000,000,0),
0 0.1em 0 rgba(255,255,255,0.3);
ボタン1個の為に裏側ではこんな記述をしています。
一から書けなくはないですが、書きたくないですね…。
こんな時に便利なのがこちら↓
【css3button.net】http://css3button.net/左側でカラーを選ぶと右側の黒い枠に自動的にcssが書き出されるのでコピペすればOK。
直感的に操作出来るので重宝しています。
【2】容量の削減スマホやレスポンシブサイトのコーディングを行う機会が増えてきました。
PCオンリーの時より困るのが「画像を使えば使うほど重くなる」ことです。
PCサイトでも画像を使えば勿論その分サイトが重くなるのですが…。
PCサイトでは表示画像サイズ=実画像サイズ
ですが
スマホやタブレットでは
表示画像サイズ×2=実画像サイズ
つまり
サイトで表示させる画像は表示させるサイズの2倍のサイズで作成しなければなりません。
理由は色んなところで説明されているので割愛…
【1】の時間短縮でボタン作成ツールを紹介しましたが
(；´Д｀) ＜ 「画像を作った方が速いんじゃないの？」
と思われた方もいるかもしれません。
表示画像の2倍サイズの画像を置き続けたら…重くなりますよね。
Yはサイトをなるべく軽くする為に画像を使用しなくても済むところはCSSで凌いでいます。
当然ながらCSSだけではどうにもならず、画像を使わざるを得ない直面にぶち当たります。
そんな時に便利なのがこちら↓
【tyny.png】https://tinypng.com/jpegとpng形式(※gifは非対応)の画像をロスレスで圧縮してくれるウェブサービスです。
圧縮したい画像をアップすると下の方でパンダがバンザイします。
Yが使用した時は大体平均65～70%位(たまに80%超えとか…)で圧縮出来ます。
サイトをもっさりさせたくない時に是非…
他にも圧縮サービスはありますので興味のある方はG△△gle先生へ・・・
【Font Awesome】http://fortawesome.github.io/Font-Awesome/レスポンシブサイトの制作でお世話になっています。
何が便利かって…画像を使用しなくてもアイコンを表示出来ることです。
使い方は検索すれば出てくるので割愛…
上述の通り、レスポンシブサイトでは表示画像の2倍(たまに3倍…)のサイズの画像を使用しなければなりません。
そんなものを使い続けたらサイトはひたすら重たくなります。
画像だと拡大すればするほど表示が荒れてしまいますが、
このウェブアイコンはベクター形式で作らている為、いくら拡大しても表示が荒れません。
その上データサイズが軽量で、アイコンの種類も豊富で扱いやすくて大変便利です。
アイコンフォントは他にもありますので、興味のある方はG△△gle先生へ…
【Google Fonts】https://www.google.com/fonts今まで伏字にしていたのにガッツリ出してしまいました…。
使い方は割愛…
インストール不要で好きなフォントを使用出来ます。
Yはレスポンシブサイトのナビゲーションや見出しタグでよく使用しています。
------------------------------------------------
＊＊＊ 番外編 ＊＊＊
無駄を省くものではありませんが…。
考え方としてお世話になっているもの。
【プログラマが知るべき97のこと.com】http://xn--97-273ae6a4irb6e2hsoiozc2g4b8082p.com/「プログラマ」に限らずどんな職種にも共通する考え方だな…と。
97個書かれていますので、読みたい方は覚悟して読んで下さい。
かく言う私も未だ全部読んでいません…
長々と書き連ねてしまいましたが、何よりいつもお世話になっているものはG△△gle先生です。
そして…こんなところに晒して良いのか迷いましたが・・・
パートナー会社のW氏です。
G△△先生で解決出来ないような面倒なことで大変お世話になっています…。
何にせよ、先駆者の方がいることは大変ありがたいことです…。
ここではリンクを貼ったり名前を挙げたりしませんが、情報発信をして頂いている方々に感謝と敬意を表します。
何もまねしたくないなんて言っている人間は、何も作れない。
- サルバドール・ダリ
