12 Fresh Free Templates In HTML/CSS & PSD | SmashingApps.com
by Akhter · March 12, 2015 12 Fresh Free Templates In HTML/CSS & PSD This is the age of minimalism and flat designs. You will see minimal and flat designs everywhere be it web design or simple graphic designs. This exponentially increasing trend is also gaining momentum in the world of mobile app development as well. Keeping this in mind, we thought to present you some of the fresh and free to use
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
無用なアウトリンク数削減のために、同一リンク先のリンクを減らすテクニック | アユダンテ株式会社
SEOを意識した場合、ページ内のリンク数をある程度の数に抑えるのがベターです。しかし必要なリンクまでも削ってしまっては、クローラーがリンク先を見に行かなくなってしまい本末転倒です。 では「どんなリンクを削減するか」というと、それは「ページ内に複数存在する、同一のリンク先であるリンク」を削っていく方針になります。 なぜリンクを減らしたいのか よくあるバナー＋テキストなレイアウトを1つのaタグにまとめる よくある商品画像＋テキストなレイアウトを1つのaタグにまとめる ページネーションは1つだけ出して、JSで複製する なぜリンクを減らしたいのか 昔、Googleのウェブマスター向けガイドラインではページ内のリンク数は100件未満に抑えることが推奨されていました。 現在ではそういうこともなくなりましたが、それでも件数が多すぎる場合に、全部が全部クロールや評価がされなかったり、リンク1件当たりの評価
DOCTYPE はなぜあるのか - 若葉もすなる☆日記というもの
DOCTYPE 宣言はなぜ作られたのですかという質問がありました。 HTML 文書の先頭には必ず DOCTYPE がなければならないとされています。しかし確かに DOCTYPE は一見何の役割も果たしておらず、無駄な行にしか見えません。なぜそんな DOCTYPE が作られ、今も必要とされているのかを理解するためには、少し昔の話をする必要があります。 SGML になりたかった HTML HTML は元々 SGML と呼ばれるマーク付け言語を参考に作られました。正確には SGML はマーク付け言語ではなく、マーク付け言語を定義するための枠組み、メタマーク付け言語とでも言うべきもので、どのような要素や属性、タグや実体参照を組み合わせてマーク付け言語を構成するかを SGML の規定に従って記述することになっていました。これが文書型定義 (DTD) であり、 DTD を宣言・参照するのが DOCTY
HTML と CSS のコーディングガイドライン
+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=“prev”とrel=“next”のページネーションにおける正しい使い方
[対象: 上級] 今日の記事は、rel=”prev”とrel=”next”によるページネーションを扱ったかなり難易度が高いトピックになります。 rel=”prev/next”とビューオールページを用いたGoogleが推奨するページネーション処理を確実に理解している状態でないと意味不明でしょう。 Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始 Googleが推奨するビューオールページとページ分割のベストプラクティス 僕自身の理解度を深めるための記事とも言えます。 なので今日は興味がある方だけ読んでください。 ページネーションについての処理方法をGoogleのMaile Ohye(マイリー・オイェ)さんがビデオで解説しました。 使用しているスライドと補足説明がWebmaster Centralブログの記事でも公開されています。 マイ
HTMLとJSとCSSだけでスクリーンセーバーが作れるHTMLScreenSaverBuilderを作った - kurainの壺
作った 表題のとおりで、HTML と JavaScript と CSS の知識があればMacのスクリーンセーバーを作れるツールを作りました。Xcode も不要です。 html でできることは大概できるので、flash 貼るとか audio ダグで音をならすとか、WebGLで3Dで遊ぶとかかなり何でも出来るのではナイかと思っています。 ダウンロード 下のリンクからどうぞ！HTMLScreenSaverBuilder 本体と、サンプルで作った ScreenSaver が入っています。 HTMLScreenSaver.zip 作り方 HTMLを準備 全画面表示されても、綺麗に表示されるような HTML を書きます。必ず名前は index.html にしてください。例として、はてなフォトライフの人気の写真を表示する HTML を書きました。 https://github.com/kurain/Ho
意外に知らない、robots meta タグの7つの正しい使い方
[レベル：初級] 今日は、検索エンジンのロボットの動きを制御する「robots meta タグ」の記述の仕方について説明します。 robots meta タグにはいくつか種類がありますが、一般的によく使われる、noindex・nofollow・noarchiveの3つのrobots meta タグに関しては以前に詳しく説明しています。 十分に理解していないと思えば、併せて読んでください。 ちなみに日本のYahoo!では、noydir の robots meta タグはサポートが終了しています。 なお原則的にGooglebotを対象にした話なので、他の検索エンジンのロボットでは違う動きをするかもしれません。 1. 複数の属性値はまとめられる 属性値が複数あるときは、ひとまとめにできます。 <meta name="robots" content="noindex" /> <meta name=
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
犯してはいけない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属性を省略することができます。写真共有サイトにユーザーが画像を
100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」
TOP > WebDesign > 100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」 制作に便利なフリーテンプレート。デザインやレイアウトによってはそのまま、もしくはサイト制作のベースとして便利に利用できますが、今日紹介するのは、100以上のハイクオリティなXHTML/CSSフリーテンプレートを集めたエントリー「100+ Stunning XHTML/CSS Free Templates [HQ] 」です。 Download Harvest 数多くのフリーテンプレートがまとめられていますが、今日はその中から特に気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Download Imagination シンプルながらも、ドロップシャドウや、細かな処理で立体
![100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」](https://cdn-ak-scissors.b.st-hatena.com/image/square/29dfb44458400fed264d895b28edab2d22bb816f/height=288;version=1;width=512/https%3A%2F%2Fdesign-develop.net%2Fwp-content%2Fuploads%2F2011%2F03%2Fharvest.jpg)
HTMLとJavaScriptで作れた！Mac用ミニアプリ (1/5)
HTML/CSSとJavaScriptでMac OS XのDashboardウィジェット（ミニアプリ）を作る連載。前回は、単純にHTMLで文字を表示するだけのウィジェットを作成しました。今回はちょっとしたテキストをすぐに入力してメモとして残せる「メモウィジェット」を作ってみましょう。 メモ機能を持ったDashboardウィジェットはいくつかあり、標準でも「スティッキーズ」が用意されています。 ただ、スティッキーズには文字数制限があり、あまり長い文字を入力できません。そこで、今回はHTMLのフォームを使って、文字数制限のない「クイックメモ」ウィジェットを作ります。メモと一緒に更新日時も表示し、同じような内容でもどれが最新なのか、すぐに分かるようにします。 ウィジェット作成の準備 さっそくウィジェットの作成にとりかかりましょう。Widgetsフォルダ内に「クイックメモ」フォルダを作成します。
50 Free CSS/(X)HTML Templates - noupe
Design templates help build an identity for any particular website. Since the techniques are changing very rapidly within the industry, one must be updated all the time. Many designers download the pre-built CSS templates to explore more. At many stages, designers seek help in the form of inspiration that would help them get back to their creativity track. Or they just want to learn a thing or two
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
“noindex,follow” robots metaタグを使うのはどんな時？
本題に入る前に、noindex robots metaタグとnofollow robots metaタグについて簡単に確認しておきます。 noindex robots metaタグ： このタグを記述したページを検索結果に表示させないようにする目的で使う。 nofollow robots metaタグ： このタグを記述したページに存在するリンクを検索エンジンがたどることを禁止する目的で使う。 禁止を意味する“no”が付かない、index robots metaタグとfollow robots metaタグというのも利用することができて、それぞれ「インデックスを許可する」、「リンクをたどるのを許可する」という目的で使います。 さて本題です。 <meta name="robots" content="noindex,follow" /> 上のタグは、インデックス（検索結果での表示）を拒否するがリ
論理的なHTML（文書構造）を意識してつくるWebデザイン（CSS）… とSEO
デザインが先にあって XHTML を書こうとすると、論理的な文章構造殻から見たときにおかしなことになることがあります。 コーディングに慣れないうちはこういう失敗もよくありますねー。 正しい文章構造でマークアップをすれば SEO的にもいいかもしれません。 今更なんですけど、Webサイトって XHTML で書かれていて、スタイルシートで装飾されていますよね。Webデザイナーから見ると、Webサイトってとかく見た目、デザインの部分、スタイルシートばかりに目がいきがちですが、Webサイトで大事な部分ってXHTMLの文章の論理構造だったりします。まずは XHTML があっての Webサイトだと思うんです。 Webサイトを作るときに、多くの Webデザイナーさんがそうしてると思いますが、私もまず Photoshop や Fireworks をつかって Webサイトのデザインを作ります（みんな違うのかな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://yuugop.com/articles/practicalaccessiblehtml/
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト