すごい！CSSだけでHTMLの検証を行う·Holmes MOONGIFT
Holmesはスタイルシートを使ってHTMLの検証を行うソフトウェアです。 HTMLの検証を行ってくれるソフトウェア、サービスは多数あります。ソースやURLを指定してエラーの行数や場所を返してくれるタイプのものです。しかしそれでは分かりづらい、そう感じていた方はHolmesを使ってみましょう。エラーをその場で赤や黄色の枠で表示してくれます。 テスト画面です。赤または黄色でエラーが表示されます。 マウスオーバーでエラーが表示されます。例えば右側にある黄色の枠はリンクに対してtitle要素がないというエラーです。 黄色は注意、赤は警告メッセージです。 Holmesはエラー部分がカラーリングで表示されるので非常に分かりやすいのが特徴です。さらにマウスオーバーすれば詳細なエラー内容も確認できます。面白いのはこの機能をCSSだけで実現していることでしょう。HolmesでよりValidなHTMLを書け
HTML5--押さえておくべき10のタグ
HTML5では、ウェブ開発時に強力なパワーや効率性、柔軟性を発揮するタグと属性が新たに追加されている。本記事では、そういったタグを10個選んで紹介する。 HTML5では、他のシステム（特に検索エンジン！）がドキュメントをより容易に解析できるようにしたり、今までにないデータ表示を可能にしたり、複雑なJavaScript、あるいは「Adobe Flash」や「Microsoft Silverlight」といったブラウザのプラグインを必要としていた機能に取って代わるような数々の新たな要素や属性が追加されている。以下では、HTML5を用いてあなたのウェブサイトを構築する際に役立つ10個の新たなタグを紹介する。 ＃1：<video>タグと<audio>タグ FlashやSilverlightといったテクノロジを用いる最大の理由は、マルチメディアコンテンツの再生にあると言ってもよいだろう。HTML5で
jQueryライクで軽量なライブラリのzepto.jsを使用したモバイル向けフレームワーク・Zoeyと日本語サンプル
選択肢の一つとして備忘録。jQueryの ように扱えて、jQueryより軽量なjs ライブラリにzepto.jsというものが あるんですが、このzepto.jsをコアに 使ったモバイル用のフレームワーク をご紹介。 jQuery Mobileライクなフレームワークです。全く同じではありませんけど、選択肢の一つとして覚えておいて損は無いかなと思います。 見た目はJQMに似てますね。似てるというかモロあれですがｗzepto.jsをベースにして、JQMライクな軽量モバイル向けフレームワークのZoeyが作られました。20KBほどのスクリプト1つで実現できます。 日本語化したサンプルです。というか英語を日本語にしただけなんですが。 Sample ちょっとcss直さないとですかね。 コードサンプル<script src="zoey-0.2.1.bundle.min.js"></script>jsファイ
IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
2130703450443574201?keyword=HTML5
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件
私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。 ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。 私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。 私自身、NetBeans IDE を使うようになってからサ
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
Template Monster Blogで紹介される無料テンプレートは品質が高い
何度かテンプレートを単体でご紹介して いますが、Template Monster Blogで たまに提供される無料のテンプレート が品質が高く、PSD付きの場合もある ので個人的には結構お勧めです。名前 とメールアドレスが必要ですが、メルマガ なんかも殆ど来ませんので助かってます。 以前もHTML5+css3のテンプレをご紹介しました。数は全然多くないですけど、ちょこちょこ出てくるのでRSSで購読する事にしました。良かったものをいくつかご紹介します。 Business Project – Stylish Solution Real Estate Website Present Your Ideas Effectively Successful Solution for Your Project! Free Interior Art Website Template Monsterはかなり前
【CSS】ネガティブマージンの使いどころ その2 表組み風レイアウト編 | バシャログ。
愛車の Vespa がブチ壊れてとてもブルーな sakai です。国産に買い替え検討中… 今回は、ネガティブマージンの使いどころについてのご紹介（2回目）です。 今回は、以下のようなデザインを実現するのにネガティブマージンを使用します。 表組み風になっていて、罫線でブロックを区切っていますが、最初と最後には罫線がないという意外とよくあるパターンのデザインです。 2. 表組み風レイアウトでネガティブマージンを使う まず、HTML を普通に組んでみます。ここでは table ではなく dl を使っています。 <h1>ニュース</h1> <div class="news"> <dl> <dt>2010/08/11</dt> <dd>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd> <dt>2010/08/11</dt> <dd>テキス
最近知ったフリーのHTML5テンプレート6個
ちょこちょこ紹介されている HTML5を使ったテンプレート で少しずつ学び始めていま すが、そんな中で最近知った テンプレートを備忘録的に記事 にまとめておきます。 ちょこちょこ紹介されている HTML5を使ったテンプレート で少しずつ学び始めていま すが、そんな中で最近知った テンプレートを備忘録的に記事 にまとめておきます。 いままでに出ているHTML5のテンプレートは以下の記事をご参照下さい。 ・HTML5で構築されたテンプレート・フレームワークいろいろ – DesignWalker ・10+ Free HTML5-CSS3 Website Templates 以下はここに紹介されて無いテンプレートです。実践で学ぶタイプの人間なのでこういったテンプレートはありがたいです。 Music Portfolio Template 音楽関連のサイト向けにデザインされ、コンテンツを作ってあります
簡単！たった１３行のコードでHTML取得＆解析をするPerlスクリプト - DQNEO起業日記
１３行のコードで、Yahoo!Japanのトピックス一覧を取得する！ PerlでHTML取得・解析したいときはLWP::UserAgentとHTML::TreeBuilderというのを使うと簡単にできます。 LWP::UserAgentを使うと、Webページの取得ができます。 HTML::TreeBuilderを使うと、HTMLのDOM解析ができます。 この２つのモジュールを使って、Yahoo!Japanのトピックス一覧を取得してみましょう。 コメント行と空行を除くとたったの１３行です。 use strict; use warnings; use LWP::UserAgent; use HTML::TreeBuilder; # urlを指定する my $url = 'http://www.yahoo.co.jp'; # IE8のフリをする my $user_agent = "Mozilla
【レビュー】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の名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
WEBアプリ開発に便利な機能＆負荷テストツール集:phpspot開発日誌
15 Free Functionality And Load Testing Tools For Web Applications WEBアプリ開発に便利な機能＆負荷テストツール集。 プログラム変更後の品質チェックを行える機能テスト・ユニットテスト、負荷に耐えられるか確認するために負荷テストツール、で品質向上に役立てられます。 Selenium等の定番以外にも沢山の機能テストツールや負荷テストツールがあるみたいです。 機能テストツール集 Seleniumのようなブラウザを自動で直接動作させて表示結果を確認するツール うまく運用すれば、機能を変更した際の正常動作確認に神経をすり減らすことがなくなります SeleniumHQ おなじみのテスト自動化ツール テストケース定義で自動でブラウザ上でテストしてくれます Watir Rubyのブラウザ自動化ライブラリだそう。 Windowsだと、IE、F
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLを読みやすく美しくする8つの方法 | AUTHORITY SITE