はてなブックマーク

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"

Ninjaな「ページトップ」ボタンが思いのほか、好評で様々な反応をいただきました。「いつ使うんだよ」とツッコミを入れられるかと思いきや「いつか使う」なんてコメントまで付いたりしてビックリしております。そんな中、次なるネタのリクエストをいただいので、挑戦してみました。 Samuraiページトップボタンこんなリクエストをいただきました。 @squeezejp 面白かったので今度は侍ネタで…ｗ — TOSHIYUKI (@patch4518) September 10, 2013 では、早速こちらをご覧ください。一緒に表示されるYoutubeを再生してから、ボタンにマウスオーバー＆クリックしてみてください。 サンプルページ » ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ 分かりにくいかもしれませんが、ちょんまげが伸びています(汗)侍というよりも殿様になってしまいますが・・・ 作り方は、前回の『【Ni

リスティング広告の競合調査や勉強のため、広告主のサイト(ランディングページ)を見る場合、クリック課金が発生しないように配慮するのがマナーです。広告のリンクを右クリックでコピーし、そこからランディングページのURLのみを切り取りアクセスする・・・それはとても手間の掛かる方法のため、クリックしてしまいたい気持ちも分かります。そこで、1クリックでその手間を解消するブックマークレットを作成したのでご紹介します。 NoPPC ブックマークレットGoogle,Yahoo!の検索結果の画面に表示されるリンクの中から、リスティング広告のURLを抽出して、ランディングページのURLのみに置換するブックマークレットです。 Google,Yahoo!のサーバを介さないので、クリック課金は発生しないという仕組みです。課金の仕組みは「心優しきSEM/SEOに携わる方に贈る！リスティング広告のURLの仕組み」をご覧く

SEM、SEOに携わる方のツイート見ていたら気になったので、僭越ながらリスティング広告のURLの仕組みを簡単に解説します。 話の発端Web業界向けのとあるイベントのtwitterアカウントが「リスティング広告はどんどんクリックしよう」というツイートをしたことに対して、@semlaboさんが 『「リスティング広告はどんどんクリックしよう」という発想は間違っている。 | SEM-LABO』というブログ記事を投稿。 先のツイートは、リスティング広告を学ぶには、「広告を見て、その先(クリックした先)のランディングページも見て勉強しましょう！」という主旨だと思うのですが、クリックしたら広告主に課金されてしまうので、勉強のためにクリック課金を広告主に強いるのはマナーとしてどうなのかということが論点でしょうか。 同業者でリスティングという仕組みを知っているなら、出来る限り余計なクリックは避けていただきた

前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタンブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCSSスプライトアニメーションコマ送りでアニメーションさせるため、1枚のPNG画像に32px×32pxの絵を10個並べました。マウスオーバーした時に、X軸方向に-32pxずつ背景画像がずれることでアニメーションしているように見えます。 .ninja{ display:block; width:32px; height:32px; background:url(images/ninja.png) no-r

Webサイトを閲覧中に、ページ上部に戻るための「ページトップ(スクロールトップ)」ボタン。ページの機能としての重要性は低く、あまり目立たない(目立たせない)ものです。そんな中でも、おっと思わせる遊び心のあふれる「ページトップ」ボタンをご紹介します。 ページトップ(スクロールトップ) ボタン女子旅つくるプロジェクト｜JTB × KOBE COLLECTION / TOKYO RUNWAY http://jtpj.jp/ 旅のサイトということで、滑走路と雲が現れ、飛行機が離陸します。 台東区でウェブ制作なら 株式会社LIG [リグ] http://liginc.co.jp/ 凄い勢いで飛び出るアニメーションは、広告バナー付き。 ブランディング、デザイン｜アートディレクションカンパニーDONGURI http://www.don-guri.com/ 一見、普通のボタンですがクリックすると、どんぐ

ブックマークレットを登録するにはボタン(リンク)をブックマークバーにドラッグしますが、その説明は文章や画面キャプチャがほとんどです。慣れていれば説明を見なくとも登録はできますが、ブックマークレットに馴染みのない方にでも、より直観的で分かりやすく案内する方法はないかと考えてみました。 ブックマークレットの参考サイトTumblrのブックマークレットTumblrのブックマークレットは、ボタンにマウスオーバーすると矢印が大きく表示され、直観的で分かりやすく参考になります。 http://www.tumblr.com/apps ソーシャルてんこ盛りのブックマークレットTumblrの案内方法をおすすめしたら早速導入されたのが、あくちーさんのソーシャルてんこ盛り。いい感じです。 http://actyway.com/tenkomori フレキシブルなブックマークレット ガイド上記2つの例は、ボタンの位置

Twitterでサムネイル画像をクリックすると変化する不思議なトリック画像がTL(タイムライン)に流れてきました。どのように実現しているのか気になったので分解してみました。(追記：2013-09-02 17:00 自作のツイートを追加しました。) まずは、見てみましょうTwitter公式のWeb(PC/モバイル)、またはアプリでの閲覧推奨です。以下の画像をクリックして、Twitterで表示された後、再度画像をクリックして拡大表示します。 エレンをクリックしてみてください。※Twitter公式推奨 pic.twitter.com/gqqrl1WHcU — 東山マキ (@wuhlnouveau) August 28, 2013 TL(タイムライン)のサムネイル表示では見えていなかったものが、クリックして拡大表示すると現れるという何とも不思議な画像です。 分解！透過PNGと背景色の組合せ一瞬、何

話題の「イラストレーターで四角形オブジェクトを1つだけ配置して、すべてアピアランスで作成されたアイコン」をさらにHTMLとCSSで再現された方がいたので、HTMLとCSSだけで手帳アイコンを作ることにトライしてみました。 参考サイトまずは参考にさせていただいた元ネタはこちらです。 ・イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。｜Web Design KOJIKA17 ・Illustrator Unlimited Appearance - suzuki | JAYPEG 両者とも、とてもクオリティが高いですね。及ばないかもしれませんが、レッツトライ。 HTMLとCSSで作った手帳アイコン HTMLとCSSはこちら ※最新のブラウザでご覧ください。 裏表紙 + 紙 裏表紙をベースに「box-shadow」を内側に、「紙」と「紙の影」を左側に4pxと1pxずつ

当ブログでもっとも多くシェアいただいた「H1一つでここまで出来るCSS見出しデザインのアイデア9個」が、公開から半年を経過しているにも関わらず、いまだ多くの方にご訪問いただいてます。そこで、アクセス解析を少し覗いてみました。 人の数・時間は有限であるまず今回は以下ブログを読み、はっとしてこの記事を書こうと思い立ちました。 ・Geekなぺーじ:知名度ゼロからの「ネット影響力」獲得への道 ネットを閲覧する人の数は有限であり、かつ、各人によるネット閲覧時間も有限であるため、世の中の全員が全て多くのアテンションを得られるわけではありません。ブログを見ていただくということは、みなさんの時間を少しずつ頂くということになります。当ブログもどれだけの時間を割いていただいたのか気になったので調べてみました。 35,442PV × 平均滞在時間2分24秒件の記事は、8月1日時点で484ツイート、609いいね、

Google アナリティクスの公式Androidアプリでは、曜日・時間別ページビューがヒートマップで表示され、ざっくりとした傾向を視覚的につかむには便利だったのでご紹介します。 ヒートマップでざっくり曜日・時間別の傾向をチェック方法はとても簡単です。Google アナリティクスの公式Andoidアプリにチェックしたいアカウントを設定して「サマリー」を表示するだけ。 「今日」「昨日」「先週」「先月」「カスタム...」と期間を指定して抽出することができます。 当サイトの場合 記事公開のタイミングやシェアしていただくタイミングによって大きく変化します。 B2Cサイトの場合 メルマガ配信などのタイミングでアクセスが集中することもありますが9時～24時までまんべんなくアクセスがある傾向です。 B2Bサイトの場合 一般的な業務時間内である9時～18時のアクセスがほとんどです。 おわりにいかがでしたでし

Webデザインのトレンドワード「フラットデザイン」。海外事例は多く紹介されていますが、国内事例はあまり見かけなかったのでまとめてみました。 「フラットデザイン」に明確な定義はなく、事例の選別は非常に悩みましたが、要素を含んでいるであろうサイトも含めピックアップしてみましたので参考にしていただければと思います。 フラットデザインとは簡単に言うと「立体感やテクスチャ、影など現実に似せた装飾を排したシンプルで平面的なデザイン」といったところでしょうか。 さらに、グリッドレイアウト、抑えめのトーンでの統一感、ベタ塗り、などが特徴になるかと思います。 詳しくはこちらが参考になりますのでご覧ください。 ・2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | MEMOPATCH ・今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG 国内「フラットデザイン

サイトやブログのアクセスアップには、ページのタイトルや概要はとても重要な要素となります。 昨今、アクセス元の多くは、検索エンジンやソーシャルメディア、キュレーションサービスなどが中心です。各サービス上での表示のされ方次第で、アクセス数に大きな違いがあると言っても過言ではありません。 そこで、各サービスでの表示されるタイトル(title)や概要(description)の文字数を検証し、最適な文字数を導き出しました。 ページのタイトルは20文字、概要は50文字以内に要点を絞る！検証の結果、各サービスで途切れることなく表示される最小値が、タイトル「20文字」、概要「50文字」となりました。 タイトルは、20文字以内に言いたいことを！20文字以内に収めようとすると非常に難しいので、20文字以内に一番伝えたいことを盛り込み、30文字前後のタイトルにするのが望ましいでしょう。 概要は、50文字で一旦

Web界隈では有名な「面白法人カヤック」さんが創業15周年を迎え、コーポレートサイトのリニューアルと同時に発表された新ロゴ(CI)のパンチ○力にクラっと来たのでご紹介します。 ロゴの一部分を各社員が自由にカスタマイズ3人で創業したことに由来する「カヤック(船)に3本のオール」。その内の1本を各社員が自由に手を加えることが出来るというもの。 もともと面白法人カヤックは3人で創業したこともあり、ロゴマークを「舟のカヤックに3本のオールがある」というイメージにしていました。 今回、そのオール3本のうち、1本を各社員が自由に手を加えて変更できるようにしました。 野球ゲームの制作者なら野球のバット、コピーライターなら鉛筆、飲食店業務ならおたま…という形です。鉛筆 素敵なコピーを書いてくれそうです。 ライトセーバー 未知なる力を発揮してくれそうです。 タコの足 吸付いたら離れない粘り強さがありそう?!

「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ

7月2日「Google Reader」のサービス終了から2週間以上経過し、みなさんは代わりにどのRSSリーダーを常用するか固まって来た頃でしょうか。 どのサービスが人気なのか気になるところですが、各所ブログなどでは登録(購読)ボタンを公式に提供しているFeedlyボタンをよく目にするような気がします。 そこで今回は、ブログファン獲得のための各RSSリーダーの登録(購読)ボタン・リンクをご紹介します。 Feedly http://cloud.feedly.com/ ボタン設置ドキュメントhttp://www.feedly.com/factory.html 設置サンプル： 登録リンク青字部分にURLエンコードしたfeedを入れます。 <a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3a%2f%2ffeeds%2efeed

自サイトに設定しているGoogle アナリティクスのトラッキングコードが、意図せず他サイトに設置されてしまいアクセス解析が正確にできなくなってしまうことがあります。 まずは、間違って設置されたサイト運営者に連絡し変更を依頼する事が先決ですが、対応に時間がかかったり連絡が取れない場合もあります。そんな時は、Google アナリティクスの設定で回避することができます。 当記事を書くきっかけとなったのは、陰ながら勝手にお世話になってるWebクリエイターボックスのMana(@chibimana)さんの以下ツイート。 度々うちのGoogleアナリティクスの解析コードが他サイトに埋め込まれて正確な解析ができません。最近また変な解析結果出てるなーと調べたら ameblo.jp に埋め込まれ、芸能人オフィシャルブロガーさんの結果まで反映されてるよ＼(^o^)／ — Mana (@chibimana) Ju

Gunosy(グノシー) - http://gunosy.com/ Gunosy(グノシー)はあなたのtwitterアカウントやfacebookアカウント,はてなアカウントからあなたの興味を分析し，興味にあったニュース・記事を推薦するスマートなパーソナルマガジンです。 Gunosyの配信による爆発的なアクセスを「Gunosy砲」なんて呼んだりします。 同時アクセスが300件を超えるなど、影響力は日に日に大きくなっているようです。 ・Gunosy砲の威力が上がっている件。同時アクセス300件突破 - ihayato.書店 | ihayato.書店 これだけ同時にアクセスがあると安価なレンタルサーバーだと、ページが表示できないなんてことも起こるでしょう。 というのも、Gunosy砲には、隠された本当の威力があったのです。 背後からの砲撃Gunosyではメールやアプリ、Webでユーザの興味にあっ

みなさんご存じ(?)のCcss = 『Chocolatecoating Style Sheet』をいろいろなサイトやご自身のサイト、ブログで簡単に試せるブックマークレット＆ブログパーツをご紹介します。 CcSSについての詳細はこちら↓ ・「バレンタインデーにまだ間に合う！ブログやサイトをチョコレート色に彩るCcSSの実装」 見出しがチョコレートに！CcSS ブックマークレット 見ているサイトの見出し(h1,h2,h3)がチョコレートに変身するブックマークレットです。まずは、下のリンク「Chocott!」をクリックしてみてください。当サイトの見出しがチョコレートに変化します。もう一度クリックすると元に戻ります。 上記のリンクをブックマーク バーまでドラッグします。その他のWebページを閲覧中にこのブックマークレットをクリックすると、3つのWebサービスへのリンクが表示されます。(右クリックし

巷ではバレンタインデー間近という雰囲気ですが、特に予定のない私からみなさまへのちょっと早いチョコレートの贈り物です。 「CcSS」聞き慣れない見慣れないワードだと思いますが ブログやサイトをチョコレート色に彩るには大事な技術となります。 そうそれは 『Chocolatecoating Style Sheet』 ・・・・・・ ・・・・ ・・・ ・ ・・・はい、それでは以下にご紹介します。 IE8くんのこと前から・・・(*^.^*) サンプルとソースを見る » 「border」の上3px、左右5px、下12pxの幅と色を調整することで立体的な表現をしています。また、擬似要素の「:before」「:after」に「border」で作成した台形を配置して切り込みを再現。台形の作り方はこちらをご覧ください。 ・アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン でもIE8

ぷるぷるしてたw 何枚も重ねたら面白そうだなぁ。('A')っ｜ぷるぷる！飛び出す？！CSSでテキストを3Dっぽくしみた！ :. SQUEEZE .: squeeze.jp/blog/web-desig… — すしぱくさん (@susipaku) 2013年2月6日 それでは・・・ まずは、何枚も重ねたような絵の素材が必要です。「街並みのシルエットを何層にも重ねて」など色々と考えていましたが、なかなかしっくり来ません。 そこで思い出したのがこれ↓ ・CSSで絵を描く！？今日から作れる達人のコツをご紹介 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話 『よし！キャラを描こう！』 まずは2D ORAEMON なかなか良いできです。 「box-shadow」「border-radius」など駆使して描きました。 （※CSS3に対応した最新のブラウザでご覧ください。）

ブログシリーズ第１弾「『ブログ元年?!』2003年流行しそうなWebサービス」の続編は、壮大過ぎてなかなか筆が進まないのでWebデザインに携わる者として制作にまつわる話題をひとつ。 まずは下の画像をご覧ください。じっと見ていると少し立体的に見えてきませんか？ （上手く見えない場合は、画面から離れたり近づいたりと、距離を前後に調整してみてください。） By brownpauこれは、微妙に違う角度から撮影した2枚の写真を交互にアニメーションすることで、立体的に見せる手法を用いた画像です。3D映画などでは、左目と右目それぞれに別の映像を見せる事で立体的な表現をしていますが、これは残像効果を利用して簡易的に立体感を出しています。 TumblrやFlickrで「Wiggle gif」「3D gif」と検索すると、いろいろ面白い立体画像が見る事ができます。 ・wiggle gif | Tumblr ・

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);

HTMLはシンプルにCSSの「border」や「box-shadow」、擬似要素の「:before」や「:after」を使って実装する立体的な見出しデザインをご紹介します。 以下2つの記事にインスパイアされ、見出しデザインをいくつか作成しました。両記事を参考にしつつも、私なりの方法を説明していきたいと思います。 CSSの擬似要素を使った見出しデザイン｜Webpark[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス まずはサンプルをご覧ください。 サンプルページ » 「border」で三角形や台形を作る最初に、今回の大きなポイントでもある「border」で三角形や台形を作る方法をご紹介します。「border」は要素の周囲四辺それぞれを囲むものですが、隣接する二辺の「border」が設定された時に、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられ