めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
商用利用可能なCSSテンプレート｜Htmlテンプレート
2007年1月。私がブログを始めた同じ月にミャンマーの青年が個人でも商用でも無料で使えるFreeFlashTemplateというサイトをオープンさせました。Flashのテンプレートを無料で提供というスタイルですね。 とても素晴らしいソースとして、結構使われた人も居るかもしれません。ある程度広告収入と言う方法で軌道に乗せたNetDNAは、その一年後2008年に、FreeCSSTemplateというサイトも同時に発足。 そして現在。総テンプレート数が335個。 改めてこのサイトを見ると、かなり優れたものが多いので、だいぶ前に紹介した気がしないでもないのですが（他のブログでみただけかも）、再度ご紹介したいなと思います。 とりあえず使う前の注意 個人、商用問わず利用可能です。作品を複製、頒布、展示、実演することができます。二次的著作物を作成することができます。本作品を営利目的で利用することができま
主要メーラーのバグを回避するHTMLメール用テンプレート -Email-Boilerplate
Gmail, Outlook, Yahoo Mail など主要なメールアプリケーションに対応した、HTMLメールの主要なレンダリングの問題を避けるために開発されたテンプレートを紹介します。 合わせて、HTMLメールの作成に役立つポイントをまとめたスライドショーも紹介します。 HTML EMAIL BOILERPLATE Email-Boilerplateとは Email-BoilerplateはHTMLメールを作成する上で、主要となるスタイルをはじめ、各メールアプリケーションのバグを避けるためのものです。 テンプレートは大きく分けて、head箇所とbody箇所があります。head内にはグローバルなスタイルが定義されており、body内にはHTMLのデザインに必要とさせる要素と特定の修正箇所が含まれています。 これらは、そのまま利用してもよし、あなた自身で必要なものを加えたり、削除して使用して
今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます！ 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン（人件費） ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい！ なんでどんどん情報をシェアしたいですね！ もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
[CSS]順序付きリストol要素を視覚的に美しくスタイルするチュートリアル
プレーンな状態で割とスタイルされるol要素を視覚的に美しくするスタイルシートのチュートリアルを紹介します。 Firefox4でのキャプチャ 順序付きリストを美しくスタイルするチュートリアル HTML HTMLは非常にシンプルなol要素で実装します。 <ol> <li>List item one</li> <li>The second item on the list</li> <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework
Webデザイナーやフロントエンドデベロッパー 向けのフレームワークが登場したようですね。 HTML5/CSS3/jQuery/PHPを使って構成さ れており、シンプルで軽量。小規模レベルの プロジェクトのスターターキット等にも利用して 欲しい、とのことです。 話題を集めるHTML5やCSS3、jQueryで構成されているので勉強がてら触ってみるのもいいかもしれません。ライセンスはGPLとMITのデュアルライセンスです。 (X)HTML5, CSS3, PHP & jQuery Front-End Development Frameworkとのこと。PHPファイル1枚にHTML5/css3/jQueryを詰め込んだシンプルな構成です。 簡単に始められますよ。最初からそこそこ作られています。 マルチカラムのデモなんかも。 上記はIETesterを使用したIE7のキャプチャ。CSS-PIEなども
犯してはいけない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属性を省略することができます。写真共有サイトにユーザーが画像を
[CSS]チャイルドセレクタを使った、グリッドを簡単に設計できるフレームワーク -Child Selector System
チャイルドセレクタ（Child Selector）を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。 Child Selector System [ad#ad-2] Child Selector Systemの主な特徴 超軽量サイズ（0.31KB） 使い方はとても簡単 余分なHTMLは最小限 コンテナはパーソナライズ可能（%, px, em） カラムのネストをサポート 条件付きコメントを使用すれば、IE5.5にも対応 Child Selector Systemのスタイルシート スタイルシートは超軽量で、下記のコードで全部です。 単位で使用している「%」は、「px, em」などに変更して使用することもできます。 div{float:left;width:100%} .right>div{float:right} .one>div{wid
2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
IE7からのCSSの小難しいセレクタやプロパティいろいろ
チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は
[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
audioタグでリズムマシン作った - hitode909の日記
HTML909っていうリズムマシンを作った． チェックボックスをぽちぽちすると，音が鳴ったりする． HTML909 audioタグをタイミングよく鳴らすのが難しいようで，環境によって挙動が変わっておもしろい． Safariだとうまく動く． Firefoxだと，この前まではいい感じだったけど，この前バージョンが上がってから，音がよれよれになるようになった． Google Chromeでは音が出ない． そのうち，ブラウザのバージョンが上がったら，ましになると思う． 音は，TR909-all.zipみたいなやつを拾ってきて使ってる． ここで配ってた． Music Machines: Roland TR-909 wavファイルはGAEに置いてるのだけど，app.yamlで，mime typeを指定しないと，audioタグで再生できなかった． こんな感じに，mime typeを指定する． - url
意外と知らないHTMLタグ講座 | オモコロ
HTMLタグというのはWEBの文章やグラフィックの配置や装飾を指定する便利な記号です。かけだしブロガーも、バリバリのプロフェッショナルも要チェック！意外と知らない便利なタグがあるかも！ 原宿: うーーーん………どうもホームページ作りがうまくいかないな…… リックェ: こんにちはー 原宿: おー、リックェ リックェ: 「HTMLタグ」のことでお困りだって聞いたんですけど？ 原宿: そうなんだよ、全然わかんなくてさ リックェ： 任せといてください！ 僕、一応そっち系の仕事してますんで詳しいですよ 原宿： 頼りになるー！ 悪いけどちょっと教えてよ リックェ： はい。まぁHTMLタグってのはマークアップ言語（ランゲージ）のひとつで、ドキュメント、つまり文章やグラフィックですね。これの配置を決めたり装飾をしたりする…… 原宿： あー、ちょっと待って。口で説明されてもイマイチわからないから、とりあえず
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
どこまでがHTML5なの？
HTML5にはCanvasタグやVideo/Audioタグ、ドラッグ＆ドロップ、Microdata、Web Workersなどさまざまな機能があると説明されますが、実際にはこれらは「HTML5とその関連仕様」を含んでいます。 仕様書に従った厳密な「HTML5」とは、どこまでの範囲を指すのでしょうか？ モジラジャパンの浅井智也氏が「Keypoints HTML5」という資料を公開して分かりやすく紹介してくれています。 仕様書に沿った「HTML5」の範囲とは HTML5は、W3CとWHATWGが共同で仕様策定をしていますが、両者の仕様書に書かれている範囲は異なっています（非常に細かい部分では一部の仕様に違いもあります）。Keyoints HTML5から、その両方の仕様でHTML5の範囲を示した図を紹介します。 図の右側のW3C仕様ではCanvas、Microdata、Web Messaging
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
not found
HTML5で制作されたサイトをまとめたギャラリーのまとめ
築地本願寺のHTMLソースわろたw
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
日本語で学べるHTML5関連資料15個まとめ : 二十歳街道まっしぐら
