For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 Vim Advent Calendar 2011 43日目の記事です。というかもう2012年ですね! あけましておめでとうございます。この度は前回の続き。本当は翌日にでも書くつもりだったけど伸ばしに伸びたWeb屋のためのVim特集をお送りします。初めに言っときますが、3部作です。つまりこの記事は2/3。どうしてこうなった。 Web屋のための Vim-Starter-kit Demo: Vim Starter-Kit from sigwyg on Vimeo. はい、けっきょく作ってしまったんですよ。初心者導入キット。黒い画面恐怖症の方々のためにGit依存しないように作
こんにちは。HTMLを書き始めてはや16年目・・・のするぷ( @isloop )です。 95年からネットを初めて、ずっとHTMLを書き続けてきた私ですが、未だになれないタグがあります。 それはTableタグ。 人にデータをわかりやすく提示する表をつくるタグなのに、このタグ自体がちょーわかりにくい。 そんな手強いTableタグですが、ひとりぶろぐの @hitoriblogさんが、このTableタグをちょーわかりやすく作れるウェブサービスをつくってくれました! その名も「MobTabGen」!今日はこのネ申サービスをご紹介します! MobTabGenとは? ひとりぶろぐの @hitoriblogさんが開発した、ちょーカンタンにTableタグを生成できるウェブサービス。元々スマートフォン向けのサービスですが、もちろんPCでも使えます。 MobTabGenの使い方。 MobTabGenにアクセスし
掲載するコンテンツにナンバリングをつける際にまず思いつくのは、ol要素を使うことでしょう。確かに、ol要素はナンバリングするのに非常に合理的です。 ここでは、そのol要素を頼らずにナンバリングするテクニックを紹介します。 Numbering In Style [ad#ad-2] 下記は各ポイントを意訳したものです。 ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。 このFAQのリストは、dl要素で実装されています。 dl要素でナンバリングしたデモページ ※実装は、下記で紹介。 ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered list numbers」の記事です。 Styling ordered list numbers デモページ このデモでは入れ
著者とコンテンツを関連付ける「rel="author"」タグをグーグルが導入 ★★★★☆ 「何が書かれているか」に加えて「誰が書いたか」の情報 (Google Webmaster Central Blog)グーグルは、ページコンテンツの作成者をグーグルに伝え、ウェブ上のコンテンツが誰によって作られたかを特定するための「rel="author"」属性のサポートを始めたことをアナウンスした。ウェブページを特定の作者と結びつけることで情報を探しやすくするのが狙いだ。 サイトでこれを実現するには、サイト内に著者情報を表示するプロフィールページを設け、各コンテンツページからそのコンテンツ著者のプロフィールページへリンクを張り、そのリンクにrel="author"属性を追加するだけだ。 たとえばWeb担では複数の著者が記事を公開している。筆者もそのうちの1人で筆者専用のプロフィールページがある。今あな
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説:(有)ムーニーワークス 林 豊/田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。(チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。) WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う!
画像基本はPNG8とJPEG、必要に応じてGIFを利用画像ファイルは基本的に、イラストなどはファイル容量が軽いためPNG8、写真はJPEGファイルを利用します。ただし、IE6以前で透過PNGが利用できないため、必要に応じてGIFを使い分けます。 HTML<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="keywords" content="ホームページ制作,東京" /> <meta name="description" content="東京世田谷のホームページ制作会社。「声」をテーマに、御社の顧客満足向上に貢献するWebサイト制作をお手伝いします。" /> <title>エイチツーオー・スペース[H2O Space.] | ちゃんとWebなホームページ制作会社(東京・世田谷)</title> <link
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か? マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
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 のモードスイッチなどの情報も含
IE9の固定サイトを使ってみたので、まずはmetaタグの指定方法をまとめておく。 固定するとどうなるの? こんな風になります。 画像はjsdo.itで作ったサンプルです。 ホームボタンのアイコン画像 戻るボタンの色 進むボタンの色 ウィンドウサイズ などをカスタマズ可能です。 サイトの固定方法 Windows7でIE9をいれていること。 固定したいサイトを開いてタブをタスクバーにドラックアンドドロップする JavaScriptを使ってどうにかする。 実装方法 基本的な設定はmetaタグだけでできます。 ホームアイコンの指定 立ち上げたアプリケーションの戻る進むの横のホームアイコン icoファイルに32×32が含まれていればそれが採用される。 [html] [/html] アプリケーションの名前 タスクバーのアイコンを右クリックしたときに出るInPrivateブラウズを開始するの下にある文字
http://hatsukari.2ch.net/test/read.cgi/news/1303184717/ニュース速報板より 1 : ◆BB2C/xRDfM (東京都):11/04/19 12:45 ID:LqzN9BDP0● 犯してはいけないHTMLタグの過ち10個 ちょっと前の記事ですが10 HTML Tag Crimes You Really Shouldn’t Commitという記事を見かけておもしろそうだったので紹介します。日本語にすると、犯してはいけないHTMLタグの過ち10個というところでしょうか。 知っている内容も多いかと思いますが、再確認の意味を込めて見ていただければと思います。 1. インライン要素の中にブロック要素を入れない 2. 画像に代替テキストのalt属性が入っていない 3. 必要な場面でリストを使っていない 4. <strong>や<em>ではなく<b>や
デザインが施された内容のメールは、通常のメールよりも目を惹き、内容への注目度を高めてくれる効果があると思います。そこで今回紹介するのは、HTMLメールのデザインテンプレート集「Free HTML Newsletter Templates」です。 (100+ free HTML email templates | Campaign Monitor) さまざまなテイストのテンプレートが多数収録されており、好みや目的に合わせて使い分けることができそうです。中でも気になったタイプのテンプレートをピックアップしてみましたので、下記よりご覧ください。 詳しくは以下 ■HTML Email Templates | MailChimp HTMLメールのレイアウトを多数収録した便利なテンプレート。内容によって組み合わせができるのが魅力ですね。 ■100+ free HTML email templates
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
日記はぁはぁ♡ バレンタインですね♡「どうせチョコなんかもらえないし‥‥」とすねているギークな男の子と そんな男の子に恋をしている女の子に読んでもらいたい、幸せなレシピです♡ (バレンタインデーということで、語尾はわざと「♡」でお届けします♡)HTMLで作るチョコレートレシピギークな男の子に贈るチョコは やっぱりモニターの中で完結していなくてはいけません! ということで、スイーツなソースを記述してみました♡作り方はとってもかんたん! 画像はいっさい使ってません! CSSとHTMLだけで作る 「HTMLチョコ」のサンプルは以下からどうぞ。HTMLチョコ 「HTMLチョコ」のソースレシピ特性ソースのレシピを大公開しちゃいます♡CSS body { width:80%; margin:0 auto; padding:10px; background:#260900; text
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 この章で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く