少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
Webに関するisaisstillaliveのブックマーク (22)
-
isaisstillalive 2012/10/31
-
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
-
内部リンクにはnofollow属性を付けなくてよい
「トップに戻る」のリンクにnofollow属性を付けるべきか？ この問いにGoogleのMatt Cutts(マット・カッツ)氏が回答しました。 答えは、「NO」だ。 僕の補足も交えながら説明します。 質問者がどういう意図でトップページに戻るための内部リンクにnofollowが必要かどうか尋ねたのかの理由はこのビデオからでは分かりませんが、原則として内部リンクにnofollowは不要です。 数年前はnofollowでPageRankの流れをコントロールする「PageRankスカルプティング」というSEO手法が存在しました。 しかしこの“テクニック”はすでに役に立たなくなっています。 『nofollow属性をリンクに付けるのはどんなとき？』でも説明したように、信頼できない外部サイトのページにリンクを張るときにnofollowを利用します。 僕のブログでは、たとえばスパム判定を受けたサイトを紹
-
画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法
CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。Androidはひと工夫必要そうです。 CSS3 Wizardry -Back and Next Buttons Revisited- CSS3 Wizardry -Subpixel Rendering- Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。 ポイントとなるHTML ボタンを構成する要素はこれだけ。 <!--ボタン要素--> <div class="button bordered back"> <span class="label">Back</s
-
カテゴリー別配色アイデア100
カテゴリー別配色アイデア100配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 配色に関するおすすめサイトCOLOURlovers色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。 ウェブ配色ツール Ver2.0以前「配色に自信がなくても！Web デザインが好きになる配色ツ
-
『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている ：国内・海外情報から見える『企業のWEB活用法』：ITmedia オルタナティブ・ブログ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
-
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
-
tumblrが誤解されそうなのでトラックバック
tumblrが誤解されそうなのでトラックバック tumblrのお話です webってさオイラにに沢山の恩恵を与えてくれるんだよね だから恩返で、オイラがネットに公開している物は自由に使ってもらっても構わないと思ってる ギブアンドテイクって感じかな web上のものは皆のもの そう思ってる人ってweb上では結構おおいんだよね オイラはボランティアで草むしりとか空き缶広いだとかそんなことはしたこと無いのね でもwebだとボランティアする人が沢山いるんだよ 金にもならないし、自分の株を上げるためでもないのに これは俺の物って主張しないで、皆の物だよって 増田たちのように匿名でwebに情報をアウトプットしてくれる人が沢山いるんだよね tumblrってのはそのwebの物は皆の物って考えを最大限に利用したツールで 共有財産のwebの中から"これはいいね"を皆で探して質の高い情報を皆で共有する それがtum
-
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
-
HTTPエラーページに意味を持たせよう
Translation of: Adding meaning to your HTTP error pages! by Stuart Colville This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license はじめに ウェブ上で何かを検索しようとすると、既に存在しないページしか検索結果になく、それらへのリンクをクリックすることはよくあるだろう。その開いたページにデフォルトのエラー・メッセージの他に何も情報が載っていなかった場合、多くの人々は戻るボタンを押し次の検索結果を開こうとするだろう。 サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼ら
-
-
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
-
-
docomoとかいう端末はtextareaの間に文字を入れないと、そこ以降のhtmlが出力されない？ - 新だるろぐ跡地
追記 誤解でした -> http://d.hatena.ne.jp/foosin/20090712/1247367730 モバイル開発してたら気がついた。ただでさえモバイルは主要3キャリアの色んな仕様がバラバラだが、中でも最低に酷いあの、 guidってパラメータつけなければ端末IDが取得できない クッキーが使えない 外部cssが読み込めない WAP2.0互換なiモード対応XHTMLが使えるとか大嘘ついてる docomoとかいう 独自仕様ぶっちぎり、デファクトスタンダード何それおいしいの？ついでに「メールアドレスの形式はRFCに準拠しています」とか大嘘こいた挙句数週間後にはwebサイト上からその表記を抹消してその件については何のフォローも無い上、そんなアドレス使ったせいでPCとメールが送受信できない場合があるのはプロバイダのせいですよ、と受け取れる説明を載せただけじゃ飽きたらず未だにRFCに
-
【レポート】5分で把握するHTML5 - Google Developer Dayセッションリポート (1) HTML5仕様の概要 | エンタープライズ | マイコミジャーナル
Google I/Oで大きく取り上げられ、一躍注目の技術に躍り出たHTML5。Google Developer Day 2009でも、「HTML5により拓かれる次世代Web」という田村健人氏によるセッションは大盛況で、椅子が足りずに床に座り込んで聴講する人がかなりの数に上った。 筆者も同セッションに参加し、HTML5の新機能に関する簡潔でまとまった知識を得ることができた。本稿では田村氏のセッション内容を元に、HTML5の全体像をコンパクトにお伝えしよう。 HTML5とは? グーグル ソフトウェア エンジニアの田村健人氏 HTML5は、言うまでもなくHTMLの最新バージョンである。現行のバージョンであるHTML4も、決して小さな仕様ではなかったにもかかわらず、そこにWebアプリケーション向けの機能が大幅に強化された。 あまりに仕様が巨大すぎるため、現在の規格は以下の4つに分けられている。 H
-
メンテナンス中画面を出す正しい作法と.htaccessの書き方 | Web担当者Forum
今回は、Webサイトやサービスをメンテナンス中にする場合に、どのURLにアクセスしても「メインテナンス中です」の画面を出す正しいやり方を、人間にも検索エンジンにも適切にする作法を主眼に解説します。 この週末の土曜深夜～日曜早朝にかけて、データセンターの設備メインテナンスのため、Web担を含むインプレスグループのほとんどのWebサイトが、どのURLにアクセスしても「メンテ中です」という表示になっていました。 なのですが、その実装がちょっと気になったので、「正しいメンテナンス画面の出し方」を説明してみます。 ※2010-01-16 Retry-Afterを指定するHeaderの指定を修正しました（コメント参照） ※2009-06-17 RewriteCondから [NC] 条件を削除しました（コメント参照） ※2009-06-16 Retry-Afterの記述をGMTに変更しました（コメント参
-
コメント欄やトラックバックが無いブログは卑怯だ - カナかな団首領の自転車置き場ダイアリー
【はてなブックマークコメントにはPermalinkもidコールもあるのに、なぜ「反論するコストが高い・面倒」と思えるのがとても不思議なので、その根拠を教えてほしい - import otsune from Hatena】のコメント欄あたり。 コメント欄やトラックバックは無いけれど、メールアドレスの記載があって、「ご意見・ご要望はメールにて」とか書いてあるブログとかは、どうなんだろう。或いは、「ご意見・ご要望は電話にて」とか書いてあって、電話番号が記載されてる場合は……。 ていうか、電話番号書いておくのは、好い方法かもなあ、と思った。徳保タンが実践してたけど。ほんで、非通知・公衆電話は着信拒否にしとくと、いろいろヨイかも。 伝われ〜 反論したけど、相手に伝わってるかどうか分からないからイヤンという意見に対し、電話でどうぞという手法は、どうなのかなーと。 ついてこ〜い というか、俺は炎上の元に
-
男の子牧場＠サイバーエージェント まとめ
男の子牧場＠サイバーエージェント まとめ 【本件の要約】 ・株式会社サイバーエージェントが個人情報を悪用できる犯罪紛いのサイトを立ち上げ ・批判を無視して逃げたうえ、まともな説明も一切なし ・サイト閉鎖の理由が全て嘘・詭弁の塊 (直下に詳しく記載) ・得た個人情報を悪用した疑い(会員にスパムメール送信疑い他) ・「ほとぼりが冷めたらまたやります」同様の宣言 ・投資家から寄せられた本件への質問にコピペで回答 ・サイバーエージェント広報blogよりblogランキングを排除、可能な限り本件の隠蔽を図る 以上 (2009/05/18 19:57) ■「男の子牧場」サービス停止 家畜扱い批判受け http://sankei.jp.msn.com/economy/it/090518/its0905182006001-n1.htm サービスを停止する理由として同社は「男性の承諾を得る、個人情報は載せない
-
「これはひどい」と言いたくなるCAPTCHAトップ10 : らばQ
「これはひどい」と言いたくなるCAPTCHAトップ10 先日、CAPTCHAは愚策という記事が人気記事になっていました。 確かにCAPTCHAはめんどくさいですね。ええ、あのユーザー登録のときなんかに出てくるぐんにょりした文字です。 いわゆるspam業者(迷惑メールや悪質な検索エンジン最適化を行いお金を稼ぐ人たち)が、自分の仕事のためにウェブメールなどのアカウントを大量取得しようと、自動で何千何万というアカウントを自動登録しようとするんですね。 それを防ぐために、明らかに人間がユーザー登録をしようとしてるのだということを、証明しないといけないわけです。 だからCAPTCHAのように、人間にはなんとか読めるけど機械に読ませようとすると非常に難しい文字が有効なんですね。 しかしながら、ホントに読めないCAPTCHAがあったりするのも事実。 ちょうどそんな「これはひどい」と言いたくなるCAPTC
-
一般的なID/クラス名の例のまとめ - blog.takuyan.com
いつも忘れて本を開くので、自分用のメモ。 転職後、WEBデザイン全般も担当するようになり、XHTML&CSSもガツガツ書くようになったが、 なにぶん、ID名とかクラス名が思いつかないことが多いので、以下表の名称を頻繁に使わせて貰っている。 部品例 名称例 本文全体を囲むコンテナ container, wrapper, page, pagebody, all ヘッダー header, header-area ナビゲーション nav, navi, navigation グローバルナビゲーション global_nav, gnav ローカルナビゲーション local_nav, lnav 補足ナビゲーション assist_nav, utility, utility_nav パンくずナビゲーション topicpath, breadcrumbs コンテンツ全体 content(s), container
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました