Illustratorで飛び出してる文字（立体文字）をサクッと作るチュートリアル
影を下に落として、さらに影を中央に寄せて奥から手前に飛び出しているような立体文字を使用している画像は頻繁に見かけることがある思います。立体文字はIllustratorのアピアランスを使用すると簡単に作ることができます。
続きを読む ＞
position:stickyを使ってスクロールしながら片方を追従させよう
前回の記事でposition:stickyを使用してボタンを追従させましたが、コンテンツを左右2カラムに分けて、片側だけを追従させながらスクロールすることも可能です。
続きを読む ＞
ページの途中から追従するボタンを作るならposition: stickyが便利で簡単
ページをスクロールしていき途中からボタンを追従させる場合は、jsで高さを取得して任意の高さを過ぎたらボタンを表示＆追従させる処理をしていた（ような気がする）が、ページ途中からの追従について、気になっていたposition: stickyを使用したらとても便利でした。
続きを読む ＞
CSSで縦書きを表現しよう
ひとつ前の記事でPhotoshopで縦書き文字ツールで縦書きをする方法を書きましたが、今回はcssで文字を縦書きにする方法になります。
続きを読む ＞
Photoshopの縦書き文字ツールで英数字も綺麗に見せよう
- 続きを読む ＞
Photoshopで縦書きの文字を作ることがありますが、数字や英語が入っている場合はその文字も縦書きになってしまい、使いどころによっては不格好になるシーンが発生することがありますが、そんな時は1クリックで即解決ができます。
PhotoshopでQRコードを綺麗にリサイズをするなら、ニアレストネイバー法で書き出そう
QRコードを作成するときは、QRコード作成サイトやブラウザのアドオンを使って作成することが多いと思います。
続きを読む ＞
作成したQRコードをPhotoshopなどの画像作成ソフトでリサイズすると、QRコードの部分がにじんでしまうという経験をされた方もいるはずです。
Photoshopを使用して、にじまず綺麗にQRコードをリサイズをする方法を紹介します。
【初心者用】jQueryを使ってjsonデータをhtmlに生成する(基本編)
前回の初心者編では、簡単なjsonデータを作成してhtmlに出力をしました。今回は基本編として、運用をする想定としてもう少しデータ量を増やしたjsonを作成し、htmlに出力させるようにします。
続きを読む ＞
IEの互換表示をさせないように、metaタグにX-UA-Compatibleの設定を使用しよう
制作会社に作ってもらったサイトをIEで見ると大きく崩れていたことがあり、どうやら勝手に互換表示がされ、IE7の表示になっていたことで思わぬ崩れが発生していた。ソースを見るとmetaタグのX-UA-Compatibleが設定されていなかったの原因でした。
続きを読む ＞
Photoshopでギザギザの円や線を簡単に描くチュートリアル
ギザギザの円を作るタイミングがあり、今までPhotoshopでギザギザの円を作ることが無かったので、備忘録としてチュートリアルにして残しておこうと思います。
続きを読む ＞
Photoshopの楕円形と長方形で簡単に扇形を作るチュートリアル
円形の一部分が切り取られているような扇形は矩形ツール単体では作れませんが、複数の矩形ツールとシェイプの統合や削除を用いれば、簡単に作ることは可能です。
続きを読む ＞