スマホサイトのパーツをことごとく網羅！「スマートフォンサイトUI図鑑」は是非手元においておくべき一冊
スマートフォンサイトを構築してて「このパーツなんて言う名前なのかな」「どうやって作るのかな」と言う瞬間は結構あるものです。 そんな悩める子羊を救う良著がKADOKAWA/アスキー・メディアワークスさんより発売されました。その名もCSS3&jQueryで作る スマートフォンサイトUI図鑑。 ありがたくも一冊ご恵贈頂きましたので、レビューしてみたいと思います。 いや、マジこの本オススメ。こう言う本、ほんとに欲しかったんです。 書籍の内容 何度もコピペして使いたい定番43パーツを厳選。 スマホサイトのUIの名前と使い方、ソースコードをまとめました。 「コーチマークってどんなUI?」「タイムラインってどうやって作るの?」 本書は、スマートフォンサイトの制作で欠かせないUIパーツの「名前がわからない」「使い方がわからない」「作り方がわからない」を解決する本です。 定番の43パーツを体系化して収録。豊
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
Webデザイナーな私のEvernoteの使い方（現状）
Webコーダーとなって2年ちょい、最近ではデザイン業務もやらせていただいております@OZPA でございます。 本日は、私がコーディング等のネタ帳として使用しているEvernoteのノートブックについて簡単にご紹介。 Evernoteにクリップしている情報 私が「業務に役立ちそうだな」とEvernoteに放り込んでいるのは jQueryプラグイン、テクニック CSSのテクニック アイコン・背景などの素材を紹介しているWebサイト といったところでございます。 それを全て1つのノート、「3001_ネタ帳（CSS,jQuery etc）」にまとめておるわけです。 Evernoteの名付け方に関してはこちらの記事をどうぞ こんな風にいつか業務で使えそうだな、と思ったスライダーなどのjQueryプラグインをメモったり… form周りで使えそうなjQueryに関する記事を取っておいたり… CSSのテク
画像ファイルを一括でリネーム＆リサイズしてくれるMacアプリ「iMage Tools」がとんでもなく便利だ！
使い方 使い方は非常に簡単。まずは画像を一式（もしくは画像フォルダを）アプリウィンドウにドラッグ＆ドロップします。 するとこんな感じ。画像に一括で施せる処理は リサイズ リネーム ウォーターマーク 境界線 反射 角丸 影 の7つ。 リサイズは横幅、縦幅、パーセンテージ、正方形のリサイズができます。 リネームは元の名前、連番、作成日、リネーム日のテンプレートが最初から用意されておりますので適宜使いましょう:) 連番は桁数も選択することが出来るのです。気が利いてるぅ。 その他、角丸や境界線など一括で行いたい処理をチョイスしたらStartボタンをクリック。画像の保存先を選択すれば完了です！ ご覧の通り、全ての画像のリネーム＆リサイズが一括で出来ましたことよ！！！嗚呼便利！！！
スペルミス・文法をチェックしてくれる拡張機能「Ginger（ジンジャー）」がちょー便利！（Chrome、Safari、Firefox）
まれに英語で文章を入力するのですが、スペルミスが気になって辞書を引いたり文法を調べるために例文をググったり。時間がかかってしょうがない。 さすが、10数年前に取得した英検2級は伊達ではありません。 そんな折りに見つけたのがこちらの英文チェッカー「Ginger」。スペル・文法ミスだけでなく恥ずかしい英語のミスまで直してくれるという拡張機能（アプリ版もあり）なのです:) ジンジャー｜無料英文チェックソフト｜ネイティブ表現｜仕事効率 英語のスペル・文法ミス等を直してくれる スペルや文法だけでなく知らずにやってる恥ずかしい英語のミスまできちんと直せる新しい英文チェッカー、Ginger 世界中のGingerユーザーがすでに約30億個以上の恥ずかしい英語とおさらばしています。 via: ジンジャー｜無料英文チェックソフト｜ネイティブ表現｜仕事効率 公式サイトでGingerの機能をお試しできます。 試し
「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ
HOME>Web>「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass（Scss）とは？ Sass（Scss）とは？ Sass（Scss）とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする「Sass」と、よりCSSに近い記述が可能な「Scss」とがあるのですが、根本的には変わりありません。（記述方法が違う） ちなみに、私はScssを利用しております。 どんなことができるの ではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]
「間抜けで気持ちの悪い文章」を書くために知っておかなければいけない6つのテクニック
ブログや日記、メールなどを作成している際についつい「正しい文章」を書いてしまい、読んでいる人を辟易させたことはありませんか？ 日本語が乱れがちな現代社会。 没個性を重んじる風潮が強いこの国において、”この人は正しい日本語が扱えるきっちりした人だ”と言う印象を与えることは、あなたのイメージを損ねる原因となりかねません。 そこで本日は、読んでいて気持ちの悪い「間抜けな文章」を書くために知っておくべき6つのテクニックをご紹介しましょう。 間抜けな文章を書くために では実際に気持ちの悪い文章テクニックと文例を見ていきましょう。 最初に出ている青枠は気持ちの悪い（今回の講座においては正しい）文章、赤枠はきっちりと構成された大変に読み応えのない悪い例です。 1.敬体と常体を入り混ぜましょう。統一性が無くなるからだ。 私は篠崎愛ちゃんが大好きだ。 彼女の豊満な体にばかり目がいきがちですが、注目すべきはそ
WebサイトをiPhone,iPadのホーム画面に追加したときに表示されるショートカットアイコンの作り方＆指定方法
まぁ、「これ以上大きくてもおｋ」とは書いてありますが、iPhoneに表示されるアイコンのサイズは決まっておりますので114×114pxで作成するのが無難でしょう。 画像が用意できたらアップロード、そしてheadタグ内に [html]<link rel="apple-touch-icon" href="画像パス" /> [/html] を追加します。 これだけ。 ちなみに、「apple-touch-icon」の部分を「apple-touch-icon-precomposed」とすると、iPhoneアイコン特有のつや出し効果を拒否することもできます。（角丸効果は防げません） Webサイトのホーム画面への追加方法 さて、早速アイコンを設定した自分のブログをiPhoneでホーム画面に設定してみました。 ホーム画面にショートカットを追加したいページをSafariで開いて下部真ん中のアイコンをタップ。
薄い！オシャレ！な財布「薄い財布 abrAsus × Gaacomo Valentini」レビュー
ポケットの中にフィットするコンパクトサイズで、一般的な二つ折り財布の約半分の薄さを目指したabrAsusの薄い財布です。カード５枚、コイン１０枚、お札１０枚を収納しても、たった約１.３cmの薄さ。ポケットが膨らみにくく、ポケットの中でも快適です。 （中略） また、ただ薄いだけではなく、 使いやすさとのバランスも大切にしています。上に開くとお札とカードが、下に開くとコインが、両方開けば全体見渡せるので、レジや自動販売機でも手間取りません。コイン収納部分は浅くてコンパクトなのに、500円玉も入り、合計15枚（999円）収納できます。ニッポンの革をニッポンの技で仕上げた、メイドインジャパンの逸品です。 via: Amazon.co.jp： 薄い財布 abrAsus(アブラサス): シューズ＆バッグ 薄さと使いやすさを兼ね備えた「薄い財布 abrAsus」シリーズ。私も以前ブラックを使用しておりま
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
Coda2のプラグイン「Tea for Coda」にてdiv要素を閉じた時に自動でコメントをつけてくれるカスタマイズがちょーべんり！
divを閉じると自動でコメントをいれてくれる DreamWeaverには、要素を閉じた問いにコメントをいれてくれるプラグインがあるのですがCoda2にはそのようなプラグインが無く、ちょっと不便を感じておりました。 そんな時見つけたのがSkyward DesignさんのCodaのZen Coding – TEA for Codaでdiv要素の終了タグにコメントを自動追加するカスタマイズという記事。 導入のために「/Users/（ユーザー名）/Library/Application Support/Coda/Plug-ins/TEA for Coda.codaplugin/Support/Library/zencoding/filters/html.py」をカスタマイズします。 OS X Mountain Lionユーザで「ユーザ/ライブラリ」が見られない、と言う方はオープンになっていないOS
WordPressのオリジナルテーマ 作り方の記事まとめ
サイトじゃないですけど、今使ってる本。凄く分かりやすい。 チートシート 日本語版 WordPress チートシート | Webクリエイターボックス WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、 … コードを書く際に便利なカンペ。 CSS入門 わたくし、CSSもHTMLもまともに修めておりませんのでそのへんの知識を得るために。 CSSレイアウト実践講座 とほほのスタイルシート入門 テーマ、カスタマイズ参考 2011年に入って気になった最新Wordpressテーマの情報一挙公開 | バンクーバーのWEB屋 僕は出身が熊本でして、良い物のことを、”こりゃヨカバイ！”と言うことがあります（若い人は使わないよね、そうだよね。） さて、今日は僕が思
死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法！（Mac編）
どうも。生まれて初めて当たり付き自動販売機で当たりが出た@OZPA です。 さて、かねてより和洋風◎の@isloop くんより 「ブログのデザイン、テンプレートじゃなくて自分で作ったほうがいいよ」 とのアドバイスをうけていたのですが、phpやcssどころかhtmlすらろくに理解していなかった私。 プロフィールページを作るのに戸惑ったり、はたまたサーバを移転するのにしこたま苦労したりと本当に手のかかるお子様だったわけです。そんな私がWordPressのテーマですって・・・？汚らわしいっ！ [blackbirdpie url=http://twitter.com/#!/OZPA/statuses/64271506724757504] ですが今年の4月の終わりに上のようなつぶやきをしていることをふと思い出し、新しいことを覚える良いチャンスだなということで、WordPressのテーマを作るためにB
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
作業用BGMに超オススメ！私がよく使う音楽系Webサービス6選
デザイナーの私が色選択に迷った時に使用している配色ツール・カラーチャートなどのまとめ