HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
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 のモードスイッチなどの情報も含
javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた - 最高のコンピューティング環境とは？
CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm Chrome / Safariの最新版で動きます。Firefox / IEだと動きません。 ソースコード https://github.com/ndruger/css-game 技術的な説明 アニメーションはCSS Animationを使うだけなので簡単ですが、問題は状態管理です。 アクションゲームを作るには、基本的に下記の要素が必要です。 1. ユーザー入力に対する状態の変更 2. 状態の保持 3. 状態に応じて見た目
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
Learn web development | MDN
Complete beginners start here!Getting started with the webGetting started with the webInstalling basic softwareWhat will your website look like?Dealing with filesHTML basicsCSS basicsJavaScript basicsPublishing your websiteHow the web worksHTML — Structuring the webIntroduction to HTMLIntroduction to HTMLGetting started with HTMLWhat's in the head? Metadata in HTMLHTML text fundamentalsCreating hy
HtmlCssInclude
.. -*- restructuredtext -*- HtmlCssInclude converts css into inline style html for mobile. font size is changed by mobile carrier (docomo, au, softbank). when mobile is VGA, image size is changed. Requirements ------------ * Python 2.5 or later (not support 3.x) * lxml Setup ----- :: $ easy_install HtmlCssInclude How to Use -------- :: >>> from HtmlCssInclude import CssInclude initialize with mobi
自動でリンク切れチェックし、Webサイトの品質を保つ便利ツール8選 | 人手に頼らないWebサイトの戦略的品質管理指南
Webサイトの品質維持には、リンク切れや不要なファイルを少なくすることが重要です。今回は、Webサイト品質の問題点発見とその解決へのスピードを格段に上げる自動チェックツールを8つ紹介します。日本アイ・ビー・エムが提供するIBM Rational Policy TesterやW3Cリンクチェッカー、W3Cマークアップ検証サービス、リンク切れカッター、Web Developerなどのフリーツールも紹介 数百ページ～数万ページというWebサイトでは、人的な検査だけですべての問題点をチェックするのは実質的に不可能に近い。また、ページ数が少なくても、チェック漏れがあっては意味がない。 自動チェックツールを利用することで、問題点発見とその解決へのスピードは格段に上がる。現代のWebサイトでは、理想的な品質管理を実現するには、何らかのツールの利用は必須だともいえる。 最も効率良く診断できる専門ツール手前
kruz graphix
Most common ways to find helpful and reliable things to buy There are people in Australia who know what they can buy through the various online stores and the sellers. They usually make sure to find out nearly all kinds of informative resources to help them decide better. Though most of the time people rely on online resources to help them compare what they are going to get through the available s
W3C cheatsheet
Accessibility: WCAG2 at a Glance Perceivable Provide text alternatives for non-text content. Provide captions and alternatives for audio and video content. Make content adaptable; and make it available to assistive technologies. Use sufficient contrast to make things easy to see and hear. Operable Make all functionality keyboard accessible. Give users enough time to read and use content. Do not us
ソースコードを書くときのスタイルシート – creamu
最近ソースコードを書く機会が時々あるので、HTMLとCSSを整備してみました。 実体参照への変換は、今までDreamweaverのデザインビューにペーストして、コードビューで変換されたものを使っていたんだけど、<br />が入っちゃうんですよね。 なのでakiyanの以下のページを使うことにしました。自分で作ろうかな、とも思ったけど、これが便利だからいいかな。 HTML実体参照変換 ソースは以下のようにしました。 HTML <span class="small">ソースコードのキャプション</span> <div class="codex"><pre><code>ソースコードが入ります</code></pre></div> pre { margin:0; padding:0; overflow:auto; white-space:pre-wrap; word-wrap:break-word
1: Web 標準カリキュラムの紹介 - Opera Developer Community
1: Web 標準カリキュラムの紹介 Translated by Masataka Yakura · 20 Oct, 2009Published in: curriculum, course, beginner, Web, standards, japaneseThis is a translation of 1: Introduction to The Web Standards Curriculum/Table of Contents, written by Chris Mills. 次の記事: インターネットと Web の歴史、そして Web 標準の進化 カリキュラムの目次へ はじめに 私には、ある夢がありました。 過去8、 9年にわたり、私は教育に関する仕事に力を注いでいました。あるときは技術書を執筆し、人がその技術で何かかっこいいものを作る手助けをしました。勤務先に新しく入って
Web標準を学ぶ重量級コンテンツ「Web標準カリキュラム」の日本語訳が公開開始
オペラソフトウェアが中心となり、Yahoo!やWaSP（The Web Standards Project）などが協力して作成した、Web標準を学ぶためのオンラインコンテンツ「Web標準カリキュラム」日本語訳の一部公開が開始されました。 翻訳を行っているのは、W3Cの標準化動向などをブログで紹介していることでも知られる企業ミツエーリンクス。日本語訳の公開も、同社のブログのエントリ「Web標準カリキュラム 日本語訳の公開を開始 | Web標準Blog | ミツエーリンクス」で明らかにされました。 「Web標準カリキュラム」のオリジナルは英語版の「Opera Web Standards Curriculum」。全体で10章もある重量級のコンテンツです。 Introduction to the world of web standards Web Design Concepts HTML bas
PHPアプリからCSSセレクタでHTML／XML文書を解析する - Zend_Dom -
はじめに 本連載では、PHP上で動作するアプリケーションフレームワーク「Zend Framework」について紹介していきます。今回はDOMドキュメントを扱うためのモジュールであるZend_Domについて紹介します。 現在、Zend_DomにはZend_Dom_Queryクラスが実装されています。このZend_Dom_Queryを利用すれば、XML文書やHTML文書の内容に対してCSSセレクタやXPathでアクセスすることができます。例えば外部サービスから提供されたHTML文書を解析して、マッシュアップに利用したい場合などに威力を発揮します。 対象読者 PHPの基本構文は一通り理解しているが、フレームワークを利用したことはないという方を対象としています。 必要な環境 Zend FrameworkはPHP 5.1.4以降とWebサーバがインストールされている環境で利用可能です。本稿ではWeb
HTML 5 and CSS 3: The Techniques You'll Soon Be Using | Envato Tuts+
In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLコーディングの勉強法を教えてください。 今現在は公開されているサイトのソースを見ながら手探りでトライしている状況ですが、 やみくも感が漂っていて不安…%26utm_content%3DGoogle%2520Reader)
css-lecture.com
ashikunep.org
http://blog.e-riverstyle.com/2009/07/-html5css3.html
