犯してはいけない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属性を省略することができます。写真共有サイトにユーザーが画像を
How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3 | Envato Tuts+
As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done. As it turns out, it’s actually quite easy, using only simple, semantic HTML and some C
Wireframing: Tips, Tools, and Techniques (Pt 2) | UX Booth
Like with wireframing tools, there hasn’t been much consensus on wireframing technique. There are lots of different approaches which range from quick and dirty 30 second thumbnail sketches, to Hi-Fi wireframes using Illustrator, to creating wireframe mockups in HTML. Quick and dirty The quick and dirty approach is especially useful at the outset, as it allows for the broad outlines of the design t
Creating a Stylish Coming Soon Page with jQuery
When starting work on a new website idea, the first thing you probably do is to acquire the domain name and set up some sort of a coming soon page (remember those construction site gif animations? Don't use them!). It is actually a good idea to invest some time in the development of this page. This is the first encounter visitors have with you and your product. You can even use it as a marketing c
» HTML5 + CSS3 でコーディングするための準備 « fog-town web
現在 “HTML5 + CSS3 でのコーディング” をお勉強中。 最近やっと XHTML + CSS2 を覚えつつあるような気もするが、この業界はかなりの急流らしい……。 今回はコード記述云々ではなく、下ごしらえ的な備忘録。 【 HTML5 】 1. IE 対策 IE8 以前のバージョンは HTML5 をサポートしていない（IE9 はサポーしている）ので、全ての人が IE を使わないようにするのが最善の方法だ……が、無理だから、こちらの HTML5 有効化スクリプト をダウンロードして ＜head＞ に設置する。 <!--[if lte IE 8]> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/html5.js"></script> <![endif]--> ※ My WP 用。 次
25 Fresh HTML/CSS Web Template for Free Download - DJ Designer Lab
Today we’re going to share some Free Website Templates. Please read on and you’ll learn why you may need them. The best thing about Website Templates is that they allow you to build nice-looking websites and blogs. Also, these designs are easy to modify. Once you replace the default content with your own one, your future website will look exactly the way you want it. We request you to not remove t
David DeSandro | nclud™
Dave DeSandro is pretty darn happy working as a web designer for nclud. It's the perfect career that satisfies his creative drive as an artist and engages his inventive problem-solving faculties as an engineer. Dave enjoys working on both hemispheres of the web design world: conjuring stimulating visuals and realizing them with snappy front-end development skills. As a versatile designer and devel
15 Free Bootstrap Admin Themes
In the past, the admin sections of web applications were often built with functionality as the only priority, with little or no consideration given to the design. Thankfully, times have changed, and in recent years, there has been a pleasing convergence of powerful functionality and beautiful design. This trend has been supported by the popularity of the Bootstrap framework, which has made it easi
HTMLをWPテーマ化する時の手順リスト - かちびと.net
一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リスト STEP.1 HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクルードタグをindex.php、search.php、archive.phpに追加。 <?php get_header(); ?> <?php get_footer(); ?> <?php get_sidebar(); ?> STEP.2 header.phpのmeta
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas
これ凄いです。僕が知らなかった だけかも知れませんが、この動き でjs等も使用していないのは驚き でした。cssとHTMLのみでマウス オーバーした際の画像に3D効果 を出しています。 動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。 マウスオーバーし、左右に動かすと画像も動きます。 複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。 この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。 実用性は期待できませんが、cssとHTMLだけっていうのが凄い。ソースは以下でご確認下さい。 Pure CSS 3d Meninas (説明ページ：CSS 3D Meninas)
Webデザイナーのためのコードスニペット125選『125 Code Snippets for web designers』 – creamu
Design Webデザイナーのためのコードスニペット125選『125 Code Snippets for web designers』 Webデザインのネタを探している。 そんなあなたにおすすめなのが、『125 Code Snippets for web designers』。Webデザイナーのためのコードスニペット125選だ。 以下にいくつかご紹介。 » Ajax Star rating Bar PHPとMySQLで作るレーティングバー。リロードはない。 » Ajax Contact Form Ajaxのコメントフォーム » Wufoo オンラインフォームを簡単に作成 » Adam’s Radio & Checkbox Customisation Method チェックボックスを画像を使ってカスタマイズする方法 » CSS Rounded Corners 画像やjavascriptを使
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
[CSS]リスト要素を使用したスタイルシートの5つのトリック
ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </
HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。
読んでおくべき。で終わってるタイトルが、自分っぽくなくて違和感有り有りだったの何となく変更。 都道府県選択するやつ。がもしかしたら一日辺りの過去最高のアクセスを稼いだかも知れないという現実。 7月16日のアクセスが17,000PVオーバーって何だ・・・おかしいな、ウチはCSSネタが主力なのに・・・あぁ複雑。 本題ですが、HTML5のimg要素のalt属性に関する仕様がすごい事になってますね。 ちょっと読んでて泣きそうになるくらい事細かに書かれています。 これは、コーディングを生業としている人間なら覚えていなければならないと思うので、必読すべき内容です。 4.8.2.1 Requirements for providing text to act as an alternative for images 4.8.2.1 イメージの代替として作用するテキストを提供するための要件 ざっくりまとめ
商用無料でタイポグラフィーなXHTML/CSSテンプレート – creamu
Smashing Magazineで、商用無料でタイポグラフィーなXHTML/CSSテンプレートが配布されています。 ざっといくつかご紹介。 ↑はT-20。 Megan David Kruger MiniCon Luvbold In May we announced the Typographic Layout Design Contest that aimed to collect beautiful typographic (X)HTML+CSS-based layouts created by the design community and release them for free as a gift for the web design community. However, we did receive a number of brilliant typographic te
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://boxtuffs.com/
30 Great SEO Tips for Web Designing
HTMLの外部ファイル化