コーディング ガイドライン要旨 この文章は、XHTMLとCSSを用いてWebサイトコーディングの際のガイドラインを示すものです。 このサイト自体が、ガイドラインに則った、サンプルファイルとして作成されています。
コーディングガイドラインを作るときに定めておきたい項目｜クロノドライブ
コーディングガイドラインの必要性 私もはじめはガイドラインの必要性を感じずにいました。しかし、コーディングを続けていくうちにじょじょに必要性を感じてくるようになりました。 なぜなら、コーディングガイドラインを定めないままコーディングした結果、自分で作ったものですらどういう構造になっているか分からなくなったからです。そのため、更新に手間取ってしまいました。 一人のときですらこの有様ですから、二人以上で作業を行うことを考えるとコーディングガイドラインの必要性は明らかでした。 その後、何度もコーディングガイドラインを改善してきました。 項目1 データを編集した人が誰か分かるようにする HTMLファイル・CSSファイルともに、作成者と更新者の名前と日付をセットにした署名を入れるようにしましょう。 そのデータを編集した人が誰で・いつ編集したのかをわかるようにすることで、ミスが起きたときに責任の所在が
HTML/XHTMLマークアップ・CSSコーディングガイドライン | enoq(エノーク)
HTML/XHTMLマークアップ・CSSコーディングサービス - ciqlie（シクリエ）では、コーディングガイドラインに基づいたHTML/XHTMLマークアップ・CSSコーディングを行います。このページではコーディングガイドラインの一部を掲載しております。 案件によってはガイドラインと一部異なる設計・実装を行う可能性がございますのであらかじめご了承ください。 ディレクトリ構成 命名規則 HTMLマークアップ CSSコーディング アクセシビリティ ディレクトリ構成 html ├common/ │ ├css/ │ │ ├import.css [各CSSファイル読み込み] │ │ ├common.css [各ブラウザスタイル調整定義] │ │ ├structure.css [サイト構造定義] │ │ ├editorial.css [サイト構成定義] │ │ ├component.css [サイ
CSS(Cascading Style Sheets) コーディングガイドライン
分割した場合の CSS の種類 default.css 全ての文書に読み込ませる CSS。ブラウザごとに違うスタイルをリセットして要素別に見栄えを再定義します。汎用的なクラススタイルも含みます。 font.css フォントファミリを定義するための CSS です。 layout.css レイアウトの種類を定義するための CSS です。この CSS の中身で @import 規則を使い、個々のレイアウトを読み込みます。このファイル内では、読み込むファイル名の行のコメントを外して希望のレイアウトを読み込むようにします。 layout.css 内で @import 規則を使って読み込むスタイルの種類の例 fixed_2column_left_menu.css fixed_2column_right_menu.css liquid_2column_left_menu.css liquid_2colu
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
HTMLMEETING はじめました | HTMLMEETING
このたび、Ryota Shiroguchi(3panda)、Yuki Shimai(shimael)、Tomoki Kubo(kojika17)とともに、HTMLやCSSを中心にコーディングについて徹底的に追求していくワーキンググループ「HTMLMEETING」を立ち上げました。 活動自体は、4月くらいから毎週末Skypeで意見交換や情報共有はおこなっていたのですが、せっかくなのでそこで決めたことや議論したことをブログを通じて発信しようとということになり、今回のブログ開設となりました。 未来のclearfixはどうなる？やCSSのリセットはどれがベスト？など技術的なことから、HTML5やCSS3だけでなく将来のHTML6やCSS4を見越して、現場レベルからみた改善点や問題点をW3Cにたいして積極的に意見を出していきたいと思っています。 もしぼくらが考えていることや記事に対してご意見がありま
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
嫌われまくりのIE6の現状と仲良く付き合う方法
2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか？どれほどの人が涙を流してきたのか？そんなIE6と付き合っていく方法は？IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト！ IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう？ マイクロソフトが（！）IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ
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 のモードスイッチなどの情報も含
[CSS]バーはブラウザ幅いっぱいに、テキストは読みやすい幅にするスタイルシート
バーはブラウザの幅いっぱい（左右・左のみ・右のみ）に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。 ブラウザの幅を狭くしたキャプチャ 以下は各ポイントを意訳したものです。 まず、ブロックレベルのエレメントの幅は当然、親エレメントと同じ幅になります。単純に<body>直下に<h1>を配置すれば、自動的にブラウザの幅いっぱいになるのではないか、と思うでしょう。 しかし、それはテキスト部分もブラウザの幅いっぱいになってしまい、それは読みやすいものではありません。下記のように、バーはブラウザ幅いっぱいで、テキストは読みやすい幅になっているのが理想です。
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 を使うようになってからサ
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSのHTMLをCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ
twihelp.me
twihelp.me 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
HTMLソースも分かりやすく | Travelogue
他の人が作ったHTMLページに変更を加えるような仕事をするとき、最初に制作を担当した人が、HTMLやCSSをきちんと整ったルールで綺麗に作ってくれていると、とても作業がはかどります。 逆に、メチャクチャで意味不明なHTMLやCSSの場合、予定より大幅に作業が遅くなってしまうこともあります。 仕事で作るWebサイトは、納品した後は他の人の手に渡ることも考えられるわけなので、ブラウザでの表示だけではなく、中身のHTMLソースも整理整頓されていて分かりやすいほうが、メンテナンス性の向上やミス防止に役立つという点で、クオリティアップと言えるでしょう。 効率よくHTMLやCSSを整理する方法についていくつか例を挙げます。 HTMLにソースフォーマットの適用 Dreamweaverには「ソースフォーマットの適用」という便利な機能があります。 これは、後からでもHTMLソースを整形することができる機能で
XHTML・CSSコーディングガイドライン | d-spica
文書の構造を示すことを目的とする。見た目の装飾に関わることを記述しない。 宣言 特に事情がない場合は，文字コードをUFT-8にして，XML宣言を省略する。 DOCTYPEは原則的にXHTML 1.0 Strict 。 ただし，更新スタッフの事情に合わせてXHTML 1.0 Transitional，HTML 4.01 Strict，HTML 4.01 Transitionalにする場合もある。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> head ページの性質を示し，UAに読ませることを目的とする。 最初に <meta http-equiv="Content-Type" content="text/html; ch
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(後編)
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(後編) 2011-01-06 タイトル通り、"コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)" の後編です。 今回はクロスブラウザ(IE、FireFox、Webkit系とか)に対応させるために、ちょっとだけテクニック的な事も使っていきます。 最後に完成したページをzipで公開しています。 ダウンロードして煮るなり、焼くなりしてくれると良いよ！ おさらい 前回、下記のデザインを組んでいくことにしました。 そして前回はここまでコーディングが終わりました。 今回はコンテンツとクロスブラウザに対応させます。 コンテンツのメイン画像部分を何とかする。 これを何とかしていきます。 ポイントは"シャドウ"と"文字部分の不透明"。 HTML <div> <img src="img/woman.jpg" width="6
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
15 Handy HTML5/CSS3 Frameworks For Web Developers | Splashnology