続・よくある3つのデザインから考える、マークアップの最適解
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
複数ページにまたがる記事やコンテンツをお持ちの方へ。rel=”next” と rel=”prev” を使用したページネーションのご紹介
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
rel=canonical 属性に関する 5 つのよくある間違い
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
よくある3つのデザインから考える、マークアップの最適解
Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる
「PS4」を分解する動画、ソニーの設計担当者が紹介
ソニーとMicrosoftからいずれも北米で11月中に発売される次世代ゲーム機は、外観も性能もミドルレンジのゲーム用PCと非常によく似ている。これはアーキテクチャが似通っているためで、内部はそれほど謎に包まれているわけではない。それでもソニーは、「PlayStation 4」（PS4）の内部を覗いてみたい人のために、誰よりも早く自らこのゲーム機を分解してみせた。 Wiredが掲載した動画の中で、ソニー・コンピュータエンタテインメント（SCE）のエンジニアリングディレクター鳳康宏氏はPS4を手際よく分解し、8コアのAdvanced Micro Devices（AMD）製CPU「Jaguar」と同じくAMDの次世代「Radeon」GPUを組み合わせた強力なプロセッサを披露している。動画ではまた、PS4の筺体内部に巧みに組み込まれた電源、8GバイトのGDDR5メモリ、コンパクトなファンと並行して
これから必要なapi活用スキルは、api仕様の枠を超えて如何に「悪いことを思いつくか」 | F's Garage
昨日地上波でやっていた映画「ソーシャルネットワーク」見ました？！もちろん劇場やDVDで見た人も沢山いると思いますが、あの映画の肝は、ザッカーバーグがどんな「悪巧み」を思いつく人だったかということだったかと思います。 ザッカーバーグがやった「悪いこと」は、facemash.comというサービスを作ろうとした時に、 １．ハーバードの学生リストを作るために寮のwebsiteを片っ端からハッキングしたこと。（つまり現状できてないことを実現したこと） ２．炎上必至で怒られるような魅力的なサービスを作ったこと。 facemash.comはハーバードの女子を比較してどっちが可愛いか？！ということを格付けするサービスで、女子から猛反発を受けました。しかし、その後、Facebookを立ち上げることでその時の悪評は覆され、彼は伝説になっていきます。 今後、スマートフォンを端末として日常の中に入り込むサービスを
要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌
Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou
[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip
classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 左から、角丸、半アロー、スライド、フェードの4種類 これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。 Simptipの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> </head> Step 2: HTML ツールチップのスタイルはclassで、中身はdata
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
あなたは課金の怖さを知らない。iPhoneゲーム「黒猫のウィズ」に、ついに課金して学んだ事
どうも、前にも記事にしましたが「パズドラ」にも「モンハン」にもハマっていなかった僕ですが「黒猫のウィズ」にはハマっております。 累計ダウンロード総数1,100万超えで飛ぶ鳥を落とす勢いですね。こりゃガンホーに続いて「コロプラ」も笑いが止まらない状態でしょう。 コロプラ決算説明会 馬場社長「私たちもびっくり」の急成長 斬新な新作タイトル投入で「ガンホー・スーパーセル」連合超え目指す スポンサーリンク 黒猫のウィズの人気の秘密 今まで、「パズドラ」をマネて多くのスマホゲームが多数排出されましたが、 この「黒猫のウィズ」の秀逸なのは「クイズ」というところ。 クイズだけに低年齢層には難しいところがありますが勝間和代さんをはじめとした知識人や大人を含めて大ブームを巻き起こしています。 勝間和代ブログ： クイズRPG「魔法使いと黒猫のウィズ」魔道杯、初参戦終了 このクイズバトルは、早く答えれば特別な攻
UIディレクションのカバレッジ
タイトルでは「UIディレクションのカバレッジ」という表現をしましたが、今回はクオリティの高いUIを作るためにはどういう観点での品質管理が必要なのか、ということを自分なりにまとめてみたいと思います。 情報設計・レイアウト情報設計やレイアウトには無限に選択肢があるだけに、「どんなユーザーに、どんな接触態度で、どんな体験をしてもらいたいか」というマーケティング的な視点を持っているか否かで、アウトプットに大きな違いが出てきます。 ちなみに、初めにUIを設計する際には比較的このような視点を持ちやすいのですが、既にリリースしているサービスに対峙すると、どうしても既存のUIの延長線上で改善を考えてしまいがちです。そうならないよう、UIに関わる人たちは、常に提供したいユーザー体験の理想型を意識し、そこから逆算的にUIを考える癖をつけなければいけないと思っています。「なぜこれはこうしたのか？」と訊かれたら、
バナー制作時の文字の組み方のちょっとしたコツ
新人の頃、 「クライアントに『自分でもつくれる』と思われたらダメ」 とよく先輩に言われていました。 クライアントから、 「自分でもパワポやエクセルで作れそう」と思われると デザイナーとして失格ということです。 新人の頃は、ついついワイヤーや原稿のパワポ通りに作ってしまいがち。 （レイアウトだけでなく、デザインさえも！） しかも、複数案をだすのができないので、一度ワイヤー通りに作ると、 それ以外のデザインを思いつかない傾向があるようです。 （いわゆるグルグルするっていうことです。） デザイン経験が多くなることで、そういうことは少なくなっていきますが、 納期は成長をまってくれません。 デザインではよく使われるパターンがあるので、 そのパターンを増やすこと、 よくいわれる「デザインの引き出し」を増やすことが近道です。 私も文字については未だに勉強中で、 実際正しいかどうかはわかりませんがいくつか
titleタグとh1タグは完全同一がいい? 違ってもいい? どう使い分ける? など10+4記事 | 海外&国内SEO情報ウォッチ
h1タグは、ページの大見出しに使う、となっています。大見出しというのは、タイトルということだと思いますが、titleタグも、そのページのタイトルを表記しているタグです。 そうなると必然的に、title=h1となると思うのですが、なぜ二つに分かれているのでしょうか？ 機能的にh1はページ上で表示されて、titleは検索結果に表示されるのですが、ページ上で表示されるタイトルと、検索結果に表示されるタイトルが異なるというのは、本来は無いはずのことだと思うのですが。 SEO的には、これが分かれている意味はどう解釈されているか分かる方いらっしゃったらご教授お願いします。 こんな質問が、日本語版のウェブマスター向け公式ヘルプフォーラムに投稿された。 titleタグとh1タグは原則として（ほぼ）同じものを入れることが多いが、まったく同じにする必要があるのかと悩んだ経験のある読者も多いのではないだろうか。
はてなブログは2周年を迎えました！ 限定Tシャツが当たるキャンペーンも実施します - 週刊はてなブログ
※キャンペーンは終了しました。たくさんのご応募、ありがとうございました。 ※記事末に「はてなブログ2周年！ ありがとう!! キャンペーン」の応募方法があります。ぜひご参加ください！はてなブログディレクターの id:onishi です。いつもはてなブログをご利用いただき、ありがとうございます。 本日（2013年11月7日）、はてなブログは、サービス開始から2周年を迎えました。これもひとえにご利用いただいているユーザーのみなさまのおかげです。ありがとうございます。 クローズドなベータ版からスタートし、1カ月後にオープンベータに移行。そして2年目の今年、はてなの正式サービスとしました。 はてなブログを正式サービスにしました。書きやすく読まれやすいブログサービスを作っていきます - はてなブログ開発ブログ 1年目はまだ十分でなかった機能の新規開発に注力してきましたが、正式サービス化を機に機能面のみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【悲報】「ごはんですよ」が偽装表示：キニ速