Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
秀丸エディタをもうちょっと便利にする方法
こんにちは、WEB 担当の青野です。 今回は前回に引き続き秀丸エディタをもうちょっと便利にする方法を紹介します。 前記事の終わりにマクロの紹介をすると書いていましたが、ついでなのでちょこっとだけ便利な機能についても触れたいと思います。 単語補完 秀丸エディタには単語補完機能というものがついています。 この補完機能は辞書ファイルを使用することができるので、WEB で公開されている辞書ファイルをダウンロードし、指定しておきましょう。 この単語が辞書に登録されていない！という場合でも問題ありません。辞書はtxtファイルなので、ファイルを開き単語を簡単に追加することができます。もちろん０からオリジナルの辞書ファイルを作ることもできます。 単語補完は入力するとでてくるツールチップ、またはリストのなかから目的のものを選ぶと挿入されます。（Alt+数字でのショートカットもあります） ちなみにこの補完機能
秀丸マクロでZen-Coding
概要 Zen-Coding とは、CSSセレクタ風の簡単な記述を、複雑なHTMLソースへ素早く変換することを軸にしたコーディング支援ツールです。 例えば、div h1 aが<div><h1><a href=""></a></h1></div>になります。 その Zen-Coding を秀丸エディタでも利用できるようにすることをめざした秀丸マクロです。 本家にある機能のうち、「HTML生成」「生成したHTMLで既存のソースをラッピング」のみを実装しています。 そのほかの機能は別項で紹介するいくつかの秀丸マクロに任せ、連携していただく方針です。 インストール 秀丸エディタ（ver 7.00 以降のみで確認）を入れてください。 マクロフォルダのパスを確認します。秀丸エディタの [その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されているフォルダで
CakePHP 2.x 系で会員認証 / ログイン関係の機能を AuthComponent を使って構築する方法
CakePHP 2.1 でオリジナル CMS を構築する際に管理者やスタッフがログインできるような機能を構築します。この記事に書いてあることを理解すれば大抵の会員登録関係の仕組みは構築できるようになるので、構築をしたことない方は参考にしてみてください。 今回参考になったページは以下となります。 Authentication — Cookbook v2.x documentation (Auth コンポーネント) AuthComponent の設定を変更する – Kayaking Lifestyle (Field 名の変更) [CakePHP] セッション関連の設定 | HAPPY*TRAP (CakePHP の Session) セッション処理関数(session) (Session のおさらいの参考) Twitter でも数人の方からアドバイスを頂きました。この場を借りてアドバイスをくだ
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
スマホ向けサイトをMac/PCで表示する。すぐできるオススメの『ユーザーエージェント偽装』方法。 (フェンリル | デベロッパーズブログ)
こんばんは！開発の林です。 Bootstrap, from Twitter いいですよね！サクサク作れちゃうあたり今気に入っています。 本記事でもエントリー部分だけ Bootstrap にしてみました。 さて、話を戻します。 他所のスマートフォン向けサイトに PC からアクセスしたい、 ソースを見てみたい、解析やデバッグを行いたいことってありませんか？ 本日はスマートフォン向けサイトを PC からでも解析できるよう簡単に偽装する方法をご紹介します。 Mac / Windows 対応です。 スマートフォン向けサイトにアクセスするには はじめに、スマートフォン向けサイトにアクセスするにはいくつかの方法があります。 スマートフォン向けのアドレスにアクセスする ex. http://b.hatena.ne.jp/touch ユーザーエージェントを偽装してアクセスする Android SDK や i
【JavaScript】a要素のhrefから絶対パスの取得 at softelメモ
問題 リンク（a要素）のリンク先（href属性）の絶対パスを取得したい。 HTML中には相対パスで書いてあるんだけど。 答え ここにa要素を用意 → ソフテルのコーポレートサイトはこのブログ記事の上の上の上の階層です リンク先は「../../../index.php」。 DOM関数で document.getElementById("ID").href jqueryで $("#ID").prop('href') でも getAttributeを使うと？ //hrefに書いた文字そのまま document.getElementById("#ID").getAttribute("href") //でも古いIEだけ違う動きをするかも
clearfix のアレンジ版作ってみました - understandard
Firefox 3.6 が clearfix の影響で margin-bottom が margin-top にもかかるという話を聞いて、普段使ってた clearfix で試してみたところ、同様の現象が出たので、対応版を作ってみました。 追記（2012年2月7日）: 公開当初のコードでは問題があったので、最後に追記しました。 ネタ元の記事は以下。 firefoxでmargin-bottomがmargin-top | 乱雑モックアップ この記事で紹介されていた clearfix は以下ようなもの。 僕はこの指定から height:0; を抜いたものを使っていました。 .clearfix:after{ content: ''; display: block; clear: both; height: 0; } .clearfix{ /zoom: 1; } この記事の公開時点（2012年2月1日
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅（この行だけでいいかな） var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
デザインのインスピレーションに最適！著作権フリーの挿絵が素敵な古書のパブリックドメインサイト
こんにちは、デザイナーの長谷川です。 デザインをする時、特に気を付けないといけないのが著作権。ちょっとイラストを描こうと思っても、元にする写真の著作権に注意しておかないと複製権の侵害になったりします。 そんな時に役立つのがパブリックドメイン。パブリックドメインとは著作物などの著作権が保護期間の経過により消滅したか、著作者が権利を放棄した状態のことです。基本的に誰でも自由に利用することができます。 海外にはそんなパブリックドメインとなった著作物を公開しているサイトが数多くありますので、時々参考にしています。 今回はその中から見てるだけでも楽しい古書の挿絵などをスキャンして公開しているサイトをご紹介します。 PUBLIC DOMAIN REVIEW 様々なアーティストたちが、パブリックドメインの作品を紹介するレビューサイトです。 Liam’s Pictures from Old Books 古
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
【iPhone/iPad】ホームに置いたWebアイコンからSafari以外のアプリを開かせるJavaScriptを作りました
こんにちは！林です。 今回は、iPhone アプリ開発者 / ウェブ開発者向けの記事です。 みなさんは、iPhone の Safari にある「ホーム画面に追加」という機能をご存知でしょうか。 以下の図のように見ているウェブページを、ホーム画面にアプリのように置くことができる機能です。 ホームに置かれたアイコンをタップすると、Safari が起動し、そのウェブページを閲覧できる仕組みになっています。 頻繁に使うページをホームに置いておくと大変便利です。 この機能を利用して、 アイコンから任意のアプリ(※1) を起動する JavaScript を作成しました。 ※1 URI スキームに対応しているアプリのみ対応しています。 使い方 設置方法は </head> の直前に１行、スクリプトタグを追加するだけです。 ※ デフォルトでは、Sleipnir Mobile で開くようになっています。 <s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
鬼ツールズ（ONI-TOOLS）ブラウザで使える便利なWEBツール集
jQueryだけでURLをパースするプラグイン「jQuery-URL-Parser」 | Web活メモ帳
http://webcake.no003.info/webdesign/php-twitteroauth-site-login.html
Normalize.css: Make browsers render all elements more consistently.
JPEGmini | Leading JPEG Compressor & Image Size Reducer
