ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
目指せ爆速WEB屋！過去2年間かけて知ったリソースを駆使して作るサイトの制作手順！ | バンクーバーのうぇぶ屋
『一時間前の自分より、一秒でも作業スピードを上げる努力をなさい。』 僕が心の底から尊敬する人に以前言われた言葉です。今でも僕の背中にはこの言葉が刺青として刻まれて……いたらどうしよう恥ずかしい（汗） さて、毎年年末年始は僕にとって今まで自分が意識してきた作業スピード、そしてクオリティの両面を試す時期です。去年作ったものより、どれだけクオリティを上げることができ、どれだけ作業スピードを上げることが出来たのか。まぁ、タイトル通り、完全自己満足万歳な記事なので、去年よかちょっとスキル／スピード上がったかなぁと僕自身が感じられたら良しとしてます（笑 とりあえず、難しい話はありません、今回はみんな大好きWordpressでブログを作ります。基本、僕の作業手順を追いながら制作の助けになったリソースを紹介していく感じになりますが、何かの参考になれば嬉しい限りです。制作したサイトは公開してますので、最後に
50 Best Photoshop Tutorials of 2012(our favorites) - Designbeep
In today’s post we are showcasing highly detailed Photoshop tutorials released in 2012.We have checked tens of photoshop tutorials and we have selected our favorite tutorials.All are hand-picked and we hope you will learn many new techniques if you follow them step by step.We grouped tutorials as Photo effects and Manipulations,Text Effects,Drawing and Painting Tutorials.Just dive into the tutoria
テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」:phpspot開発日誌
trunk8 | Rick Viscomi テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」 WEB開発に携わる人なら必ず経験する、要素からのテキストのはみ出しやレイアウト崩れ。 指定したサイズの要素ないのテキストは、どんなものが入ってきても綺麗にまるめたい、という場合に使えます。 元のテキストが以下のようにあったとします。 スクリプトを読み込んだ後、$(elem).trunk8(); とJSで記述すると次のように一瞬で1行に収めることができます。 （オプションで行数指定も可能） 綺麗に要素内に収める「もっと読む」も次のように実現できます。 省略バージョンはきっちり枠内にはまっていますね。これをJSとライブラリレスで実現するのはなかなか難しい所がありますね。 これは便利。 関連エントリ テキストをブロックの中にフィットするように自動リサイズできる「jQue
2年の実務で使いやすさを追求した、便利でシンプルなワイヤーフレームのPSD素材 -RafalTomal WireframeKit
右半分 ライセンスは特に無しとのことで、個人でも商用でも無料で利用でき、修正して他の人と共有しても構わない、とのことです。 あなたがしたいことは何でもしてくれ！、と。 ワイヤーフレームの使い方としては、このワイヤーフレームと新規ドキュメントを並べてPhotoshopで開き、必要なエレメントをドラッグで移動して利用するだけです。また、エレメントのカラーはブラックになっているので、不透明度を調整し容易に背景を変更することができます。カラーを変えたい時には、レイヤーの四角いアイコンをダブルクリックしてください。 注意するポイントは、ワイヤーフレームであまりに多くのディテールを作らないことです。
超簡単に綺麗なウェブサイトが無料でつくれる「Wix」 : まだ仮想通貨持ってないの？
これはすごいですねー。使えそう。 Wix無料ウェブサイトビルダー | Wix.com 超簡単にサイトがつくれる Wixは無料で使えるウェブサイト作成サービス。Tumblrっぽいですが、ブログというよりは企業サイトなどをつくるときに使えるイメージです。 ユーザー登録後、まずはカテゴリーを選択。 アプリのページをつくってみましょう。 テンプレートがいくつか表示されるので選択。 テンプレをカスタマイズ。このエディタよくできてます。 そして公開。できちゃいました。 月額8ドル払うと広告排除＋独自ドメイン利用が可能になります。12ドル払うと帯域（Bandwidth）も無制限に。 日本語にも十分対応しているので、難なく使うことができるでしょう。会社のホームページ制作で困っている方は試してみるとよさそう。 Wix無料ウェブサイトビルダー | Wix.com
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
レスポンシブなjQueryスライドショープラグイン2012年保存版
RefineSlide / Cycle2 / iosscripts.com &ndas...他...全18件
デザイナー＆コーダーいらなくなるかも？！ウェブツール『WiX』 – @attrip
WiXってウェブサービスが日本語化されて良い感じです。 かっこいいテンプレートが初めからいっぱい用意されていて、html一切わからなくても、画像ソフトの感覚で自由にレイアウトして、html5のサイトができてしまいます。 更に、ショッピングカートもできちゃうという。 商品紹介のLPページの作成にはぴったりですね！ WiXの特長 ・超おしゃれな＆かっこいい無料テンプレートが初めからたくさんある。 ・マウスだけでレイアウトして、htmlがまったくわからなくても、なんとなくかっこいいhtml5のサイトが作れる。 ・ショッピングカートで、ECサイトもできる。 利用料金は？ 広告有り、独自ドメインじゃなくて良いなら無料。 広告有り、独自ドメインならConnect Domain プラン。 広告無し、独自ドメインならCombo プラン。 あとは↓↓を見てみて下さい。 サーバー代とか制作費考えるなら、安いで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
