CodeNote

エンジニアの新人教育に携わる機会を得たので、土日に「HTML5&CSS3レッスンブック」を読みました。

僕がエンジニアの新人研修のときに出会っておきたかったなと思えるような良い入門書です。Amazon のレビューも高評価が多いので、良書なんでしょうね。

• Amazon.co.jp： カスタマーレビュー: HTML5&CSS3レッスンブック

エンジニアやデザイナーの入門書にうってつけの本が見つかってよかったです。

CSS で画像置換をするための Tips をご紹介します。

.hide-text { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

昔は text-indent:-9999px; を使うのが主流だったみたいなのですが、今は上記の書き方が主流らしいです。

１点だけ注意したいのが、隠しテキストで Google からペナルティを受けることについて。

• Google ウェブマスター向け公式ブログ: 隠しテキストは Google のウェブマスター向けガイドライン違反です

画像の内容とテキストが異なってなければ、隠しテキストの Google のペナルティは受けないみたいです。なので、関係ないテキストを画像置換するなどダメな使い方をしていなければ問題ないようです。

参考情報

• [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス
• Replacing the -9999px hack (new image replacement) | Jeffrey Zeldman Presents The Daily Report: Web Design News & Insights Since 1995

CSS3 のグラデーションを生成できるサイト Ultimate CSS Gradient Generator を一緒にお仕事させてもらっているデザイナーさんに教えてもらいました。

グラデーションのかかったボタンの作成をお願いしたついでに「後学のため、なにで作ってるんですか？」って聞いたらこのサービスが出てきたわけです。

ベースの色は決めないといけないですが、これだったら僕でも使えそうです。

参考情報

• linear-gradient()－CSS3リファレンス

Chrome や Safari のデフォルトの印刷設定では、CSS の background-color や background-image が反映されません。

Chrome だと印刷オプションの「背景の色と画像」に、Safariだと「背景をプリント」にチェックを入れれば印刷可能ですが、ユーザにそれを強いるのもイケてないですよね。

下記のCSSで、背景色や背景画像も印刷できます。

@media print {
  body {
    -webkit-print-color-adjust: exact;
  }
}

WebKit を用いたウェブブラウザだとこれで対応できるんですかね。

参考情報

・Chrome で背景色や背景画像を印刷する – Blog, The

CSSフレームワークの比較一覧サイトをメモ。

・CSS Front-end Frameworks with comparison – By usabli.ca

Twitter や Facebook などのソーシャルボタンを横に並べて設置するためのスニペットをメモ。

■ HTML

<ul class="socialButtons">
<li>Twitter Button</li>
<li>Facebook Like Button</li>
<li>Google+1 Button</li>
</ul>

■ CSS

●横並び

.socialButtons {
  overflow: hidden;
}
.socialButtons li {
  float: left;
  margin-right: 10px;
}
.socialButtons iframe {
  margin: 0 !important;
}

●縦並び

.socialButtons {
	list-style-type: none;
	padding-left: 0;
}
.socialButtons li {
	margin-bottom: 4px;
}
.socialButtons iframe {
	margin: 0 !important;
}

・[参考] TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS – hostingjedi

Internet Explorer で a img リンク画像の枠線を消す方法を調べたのでメモ。

全画像の枠線を消す

画像に枠線を表示させたい場合はほとんど無いと思うので、img タグで直接指定して大丈夫だと思います。

img {
    border-style:none;
}

子孫セレクタで a 要素の子孫要素である img 要素のみ枠線を消す

a img {
    border-style:none;
}

以上です。

参考情報

• リンク画像の枠線を消す: 小粋空間

Coda にて、HAML/SASS のカラーリングを設定したので、その方法をメモ。

まず、下記のサイトからファイルをDLして、解凍後フォルダーの名前を HAML.mode と SASS.mode に変更します。

・gf3/haml.mode

・brajeshwar/Sass.mode

その後、/Library/Application Support/Coda/Modes ディレクトリ以下に HAML.mode と SASS.mode を設定します。

以上です。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

posted with ヨメレバ

Robin Williams 毎日コミュニケーションズ 2008-11-19

Amazon

楽天ブックス

7net

bk1

ブックオフ

e-hon

図書館

ウェブページ上でサイズを測るツール「MeasureIt!」が便利なのでご紹介します。

この拡張機能は、Chrome用のエクステンションと Firefox用のアドオンが存在します。

・Chrome用 DL：Chrome ウェブストア – MeasureIt!

・Firefox用 DL：MeasureIt :: Add-ons for Firefox

・参考：ページ上でサイズを測る MeasureIt! -Google Chromeエクステンション- – YATのBlog

以上です。
　

Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS)

posted with ヨメレバ

Andy Clarke 毎日コミュニケーションズ 2009-02-24

Amazon

楽天ブックス

7net

bk1

ブックオフ

e-hon

図書館

Facebookアプリ（Tab App）を作るとき役立つHTML/CSSフレームワーク「520 Grid System」が便利なのでご紹介します。

・公式：520 Grid System – HTML/CSS Framework made for Facebook Page Developers

・参考：Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」:phpspot開発日誌

520 Grid System は「ページの幅が520px」に設定されており、グリッドデザインもできるのでかなり使いやすいのでオススメです！

他にもCanvasアプリ用として「760-grid-system」というフレームワークがあるみたいです。

・jimeh/760-grid-system – GitHub

760-grid-system は有名なフレームワーク「960 Grid System」のマッシュアップらしく、Canvasアプリを作るときは役立ちそうですね。

基礎から学ぶ facebookアプリ開発

posted with ヨメレバ

蒲生 睦男 シーアンドアール研究所 2011-11-16

Amazon

楽天ブックス

7net

bk1

ブックオフ

e-hon

図書館