犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
「ホームページを作る人のネタ帳」さんのリデザインをしました
2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました！リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト！ 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
2011年のSEOで、これはもう避けておきたい32のチェックリスト
Googleをはじめとする検索エンジンに対して、サイトを最適化する際に気をつけるべき32のチェックリストを紹介します。 32 SEO Tactics to Avoid in 2011 [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに あなたは2011年を迎え、SEO用の膨大なリストをもっていることでしょう。ここで紹介するものは、あなたがやるべきではない32のチェック項目を知ることで、あなたのリストを少なくすることです。 2011年のタスクに下記のリストが残っているのであれば、どうぞそれらを消してください。 Hiding Stuff On-Page 隠されたテキストやリンクはGoogleが最も嫌う存在です。これらは最悪の場合、ペナルティが与えられることがあるので使用は避けてください。 白い背景に白いテキスト 画像の上に隠したテキスト CSSを使って隠したテキスト 極小サイズ
Web屋さんのための新年の抱負アイデア24
2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？ ↑私が10年以上利用している会計ソフト！ 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする
WEB制作で使えるJavascriptを使わない制作テクニック集「32 Javascript Alternatives with Pure CSS – Updated」
WEB制作で使えるJavascriptを使わない制作テクニック集「32 Javascript Alternatives with Pure CSS – Updated」 様々なWEBサイトで利用されているjavascript。様々なライブラリなども開発され幅広い表現が可能になっていますが、今日紹介するのはJavascriptを使わない制作テクニックを集めた「32 Javascript Alternatives with Pure CSS – Updated」です。 CSS Image Maps: A Beginner’s Guide | Noobcube マップ、グラフなどを始め、様々なテクニックがまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■NealGrosskopf.com l Create a JQuery Cont
大量の被リンクを集めたいなら知っておかないと損する記事のまとめ | ウェブ力学
Googleの検索エンジンから評価されるためには、何だかんだ言っても被リンクが必要です。 スモールワードやミドルワードであれば、内部SEOを徹底することで上位表示させることは十分に可能ですが、ビッグワードでの安定した上位表示は被リンク抜きには考えられません。 そこで今回は、被リンクを集めるために知っておきたい記事をまとめました。「被リンク獲得のまとめのまとめ」と言った感じで読んで頂ければと思います。 被リンク獲得手法一覧 一昔前までは被リンク獲得と言えば、相互リンクや有料ディレクトリ・無料の中小ディレクトリへの登録といった手法が一般的でしたが、今ではソーシャルサイトの普及によって様々な方法を使って被リンクを獲得出来るようになりました。 まずは被リンクを獲得する手法をまとめた記事を紹介します。 被リンクを増やすためのサイト（国内一覧） 海外の被リンクを増やすためのサイト一覧 被リンク（バック
Webサイトのフッター２００個とフッターデザインの考え
フッターの美学。 そんな素敵サイトを紹介しようといくつかチョイスしていたら海外ブログのDWSが「The 200 best footers on the web」なんていう化け物エントリーをさらっと出してきたもんだから驚きだ。 しかもクオリティもめちゃ高い。 なので今回はこのエントリーを紹介して終わろうかなって・・・。 参考までにネタ帳が好きなフッターを７つほど紹介します。 たま、フッターまとめサイトの楽しみ方も一応書いておきます。 以下からどうぞ。 すばらしいフッターデザイン２００ The 200 best footers on the web « Web Design Shock もはやひとつのショーケースというか一冊の本になってもおかしくないクオリティの記事です。 ご堪能あれ！ 中でもネタ帳がお気に入りのフッター７つ Tomáš Pojeta | kreativní grafik ここ
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
非デザイナーのためのデザイン基本テクニック その１ | 07design.blog
デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で
デザインとか加工とか出来ないからなんかいいの教えて、と言われて教えたツールいろいろ - かちびと.net
友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 普通に写真や画像を掲載するのではなく、ちょっと個性的な感じにしたい、出来れば無料がいい、でも自分でデザイン作業は出来ないから良いサイトとか無い？とのことでした。 どうしたいのか良く分からなかったので、あんまり一貫性は無いんですが、教えたのは画像加工ジェネレーターとかそういうのです。いくつか提案した中で、友人が喜んでたサイトだけまとめてみます。 BeFunky 画像を加工するジェネレーター。レトロっぽくしたり油絵っぽくしたり。エフェクトも豊富です。 BeFunky flauntR これも加工ジェネレーター。エフェクト以外にフレーム
お手軽アクセス解析サービス「Web Analyst」が永久無料化、有料版はさらにパワーアップ
せっかくGoogle Analyticsなどアクセス解析ツールを導入しても、入れただけになってしまっていて本当に「分析」ができているかよく分からない……という人は多いかと思います。これは、Google Analyticsに80種類以上のレポートがあるため、どのレポートのどの数値が売上アップに重要か判断するのが難しいためです。 以前お伝えした、EC studioの設定ほぼ不要・誰が見ても意味が分かるアクセス解析サービス「Web Analyst」では「ウェブサイトの成果」に注目、成果の達成を計測するのに特化した有料アクセス解析サービスとして登場しましたが、この「Web Analyst」が1ヶ月につき100万PVまでの解析が永久無料化、PV無制限の有料版ではレポート機能が強化されるなど、さらに使いやすいサービスに進化しました。 詳細は以下。 売上が上がる無料アクセス解析ツール｜Web Analy
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::
お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。
Web制作者のためのGoogle Chromeエクステンション15 – creamu
Web制作に使えるChromeのエクステンションを探している。 そんなあなたにおすすめなのが、『15 Google Chrome Extensions for People Who Build Websites』。Web制作者のためのGoogle Chromeエクステンション集です。 またいろいろと増えているようですね。 Web Developer Firefoxで便利なWeb DeveloperのChrome版 Resolution Test 解像度別の表示テストができるアドオン Pendule Web Developerに似た、デベロッパーのためのツール。マークアップのバリデーションや、画像を非表示にするなど Image Cropper スクリーンショットが撮れるアドオン。座標とサイズの表示もあります Webpage Screenshot 見ているページの全体のスクリーンショットが撮れ
最高の内部リンクを構築するための10のポイント | ウェブ力学
SEOのリンク対策というと外部リンクに目が行きがちですが、内部リンクの重要性も見逃せません。 当然ながら、外部リンクに比べればSEOスコアは低いのですが、スモールワードであれば内部リンクのみでも上位表示が可能となります。 そして最大のポイントは、外部リンクの場合は、どんなアンカーテキストでどんな形式で張ってもらえるかは相手次第であるのに対して、内部リンクであれば100%自分でコントロール出来るという点です。 ここでは内部リンクを構築するにあたって、おさえておきたいポイントをまとめました。 １．内部リンクはWebマスターツールで確認 まず内部リンクをチェックする方法を確認しておきましょう。どのページにどこから内部リンクが貼られているのかは、GoogleのWebマスターツールで確認が出来ます。 それぞれのページに何本程度の内部リンクが張られているかが一目でわかるので非常に便利です。 ２．ページ
SEO・アフィリエイト必勝法 - これを知らないとウェブマスター失格 - 新・浅く広くをモットーに - WEBプログラマ メモ
09:28 | 今回は珍しくSEO・アフィリエイトに関するお話をさせて頂きます。ceeは、2年前の2008年4月にリリースしました。所属する会社でサーチエンジンからの誘導を期待したサービスを立ち上げた際に、実験できる場が欲しいと思い、プライベートで一人開発しました。まず、何故グラビアアイドルをコンテンツに選んだのか言いますと、初めにこちらをご覧下さい。2007検索ワードランキング。「mixi」「Youtube」ら人気ネットサービスが上位に来て、企業名がその後に続きます。私は勤めている会社が検索系企業ということもあって、どういったワードが多く検索されているかを把握できる立場にありました。上位51位以降には、人気ネットサービス名に混じって有名タレント名が徐々に入ってきます。ちなみに2009年はこちら。グラビアアイドルではありませんが、「嵐」「東方神起」が50位以内に早速入っています。つまりce
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！
SEO研究所サクラサクラボ
HTMLを読みやすく美しくする8つの方法 | AUTHORITY SITE