Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介 | 独学Webデザイナーの覚書
最新の記事 レスポンシブWebデザインでリニューアルいたしました 2016年12月27日その他 「独学Webデザイナーの覚書」をリニューアルいたしました。ありがたいことにかなりの間更新が滞っているサイトではありますが、毎日多くのユーザーに閲覧していただきたき大変感謝しております。 今回のリニューアルについて本記事にまとめさせていただきました。 続きを読む 設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」 2014年11月15日CSS フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。 続きを読む 超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 2013年7月31日jQuery 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 続きを読む 超便利
朝日広告社 | ASAKO | Asahi Advertising Inc.
朝日広告社 企画・実施を担当した「カルビー株式会社 かっぱえびせん誕⽣60周年」新聞広告が 読売広告⼤賞Taste部⾨ 最優秀賞を受賞
Retinaディスプレイ用の@2x画像からふつうサイズの画像を出力するPhotoshopスクリプト - Awaresoft
iOSアプリを作成する際に、アプリ内で使用する画像は通常のディスプレイ用とRetinaディスプレイ用の2種類を用意する必要がありますが、これが非常に面倒な作業です。 ほとんどのデバイスがRetina Displayになった今となっては、通常のディスプレイのサポートはもう辞めてしまいたいところですが、iOS 6でiPhone 3GSもサポートされることが決まり、やはり当面は通常のディスプレイもサポートしなければならなくなりそうなので、対策を考えました。 Photoshopを使って通常のディスプレイ用とRetinaディスプレイ用の2種類の画像を用意する方法にはさまざまなやり方が考えられますが、一例としてPhotoshopスクリプトを使った私のやり方を書いてみます。 １．Retinaディスプレイ用の画像ファイルを用意する まずは、Retinaディスプレイ用の画像ファイルを用意します。 Retin
iPhone用サイトの画像 Retina対応、回転対応 - 袖触れ合うも多少の縁
アプリのサポートサイトを作って、Retina対応が気になったので調べました。 今回作ったサイトはこんな感じ hiranodept apps 以前はCSSで切り替えをやっていたのですが、JSの方が楽ですね。 img要素をとってきて、Retinaの場合はプレフィックス(@2x)を付けるのが簡単かなと思いました。 以下が元ネタです。 Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2 <img src="images/grey.png" data-original="images/logo.png" alt="" width="50" height="50" /> srcにはダミー画像のパスを入れておきます。 data-originalに画像のパスを入れておきます。 こうすることで、無駄な画像を読み込まなくて済むようです。 $(function(){ $('img').eac
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
Sliding Image Panels with CSS3
Slice 1 - Image 1 Slice 1 - Image 2 Slice 1 - Image 3 Slice 1 - Image 4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css-lecture.com
Lateral On-Scroll Sliding with jQuery