タグ

20130508に関するpink_darkのブックマーク (19)

  • HTML5 でやりがちな間違い

    HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes : HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日語にしたものではあり

    HTML5 でやりがちな間違い
  • figure 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP

    4.4.11 figure 要素 カテゴリー: フロー・コンテント セクショニング・ルート パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: 1 個の figcaption 要素の後にフロー・コンテントが続く、または、 フロー・コンテントの後に 1 個の figcaption 要素が続く、または、 フロー・コンテント、のいずれか。 コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: あらゆるロールの値 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う。 figure 要素は、いくつかのフロ

  • 見出しとセクション - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP

    4.3.10 見出しとセクション h1–h6 要素は見出しです。 セクショニング・コンテントの要素の中にある最初のヘッディング・コンテントの要素は、そのセクションの見出しを表します。その後に続く見出しのうち、ランクが同じか高い見出しは、(暗黙的に)新しいセクションを開始し、低いランクの見出しは、一つ前のセクションの一部をなす暗黙の副セクションを開始します。いずれの場合も、この要素は、暗黙のセクションの見出しを表します。 h1–h6 要素は、新たなセクションまたは副セクションの見出しを意図していない限り、小見出し、サブタイトル、別表題、タグラインをマークアップするのに使ってはいけません。代わりに、仕様の専用の要素を使わない共通のイディオムのセクションにあるマークアップパターンを使ってください。 一部の要素は、セクショニング・ルートといわれます。blockquote 要素 と td 要素が含

  • http://jp.startup-dating.com/2013/05/hottest-web-service-category-and-competitors-in-japan

    http://jp.startup-dating.com/2013/05/hottest-web-service-category-and-competitors-in-japan
  • [HTML]素朴な疑問:空白の行は内容か装飾か ― 文章とHTML

    久しぶりのエントリになってしまいました><また元気に書いていきます★ webcre8は正直なところHTMLを学びだして大した年月を重ねているわけではありませんが、自分なりに密度の濃い学習に励んできたつもりはあります。 そしてその中ではとりあえず理解が及ばなかったり、ソースが英語で、「自分より詳しい人がこの解釈で間違いないと言っているから」「リファレンスに書いてあるから」そういうものだと受け入れてしまっているセオリー的な知識や情報も多々あります。 でも「これってそう言われてるけど当にそうなのかな」って考えることも必要ですよね。 HTMLは内容、意味 CSSは表現、装飾 これは大前提ですよね多分。pは段落。h1、h2、h3等が見出し。sectionは段落から始まるコンテンツの塊(セクション)。blockquoteは引用。このように、HTML内に書かれたテキストや画像、コンテンツ等の文書の内容

    [HTML]素朴な疑問:空白の行は内容か装飾か ― 文章とHTML
    pink_dark
    pink_dark 2013/05/08
    「意味を持っている空白」か、確かに面白いな。空白を表現するならば、<br>よりも<p>&nbsp;</p>の方がいいかなと思った。
  • HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

    ちょっと前に 「hgroup 要素が HTML5 の勧告候補 (Candidate Recommendation) から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね (Editor's Draft では)。 ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。 HTML5 W3C Candidate Recommendation 17 December 2012 hgroup 要素が HTML5 勧告候補から削除される main 要素とは? main 要素は元々、Steve Faulkner 氏 (Web アクセシビリティ関連の方) が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークア

    HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除
    pink_dark
    pink_dark 2013/05/08
    「role="main" でいいじゃん」。確かに。
  • HTML5の「コンテンツ・モデル」と「カテゴリー」を理解してマークアップするためのまとめ | Mnemoniqs Web Designer Blog

    PCサイトのコーディングではまだまだHTML4で行うことも多いですが、最近ではスマートフォンの案件も増え、HTML5でマークアップする機会が多くなってきました。 先日の記事、「うやむやにしていたHTML5の文書論理構造をきちんと考えてみる」では基的な文書論理構造のフローチャートを載せました。今回はHTML5をマークアップするうえで無視できない『コンテンツ・モデル』について、自分の理解を深める意味でも、改めてまとめてみようかと思います。 目次 『コンテンツ・モデル』を理解する必要はあるの? 『コンテンツ・モデル』って一体なに? 『コンテンツ・モデル』の主要カテゴリー 注意!「カテゴリー」=『コンテンツ・モデル』ではない 『コンテンツ・モデル』をもとにしたタグの配置ルール トランスペアレント・コンテンツとは? まとめ 『コンテンツ・モデル』を理解する必要はあるの? HTML4でマークアップし

  • 3分でわかるHTML5のコンテンツモデルとカテゴリー (1/3)

    HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 前回のセクションに関する要素の解説では、「カテゴリー」や「コンテンツモデル」という単語が登場しました。カテゴリーとコンテンツモデルを理解すると、「要素の中にどの要素を入れられるのか」を、容易に判断できます。 「コンテンツモデル」は入れられるコンテンツのルール、 「カテゴリー」は詳細な分類 第1回の記事で、「a要素がブロ

    3分でわかるHTML5のコンテンツモデルとカテゴリー (1/3)
  • コンテンツ・モデル

    メタデータ・コンテンツ <base /> 空 <link /> 空 <meta /> 空 <noscript>-</noscript> スクリプトが無効な場合:0個以上のlink要素, meta要素, style要素 スクリプトが有効な場合:テキスト <script>-</script> src属性がある場合: 空、もしくは著作権情報やAPI 情報といったスクリプトの説明文 src属性がない場合: JavaScriptのコード等(text/javascript以外を用いるのであれば、type属性は必須) <style>-</style> CSSのコード等(text/css以外を用いるのであれば、type属性は必須) <title>-</title> テキストのみ 必須要素であり、必ず1個だけ定義 フロー・コンテンツ <a>-</a> トランスペアレント(ただし、インタラクティブ・コンテンツ

    コンテンツ・モデル
  • 05step.com

    This domain may be for sale!

    05step.com
  • html5にrole属性やstate属性なるものがあると聞きました。その使いどころは・・・? - 現状で使い道はあるのでしょうか... - Yahoo!知恵袋

    state 属性なんてありましたっけ? 規定書をざっと見た限り、見当たりませんが。 role 属性というのは、XHTML 2.0 に由来します。 ・当は、こういうウィジェットを書きたい……。 <tablist> <tab id="tab1">タブ 1</tab> <tab id="tab2">タブ 2</tab> <tab id="tab3">タブ 3</tab> </tablist> <tabpanel labelledby="tab1">パネル 1</tabpanel> <tabpanel labelledby="tab2">パネル 2</tabpanel> <tabpanel labelledby="tab3">パネル 3</tabpanel> ・でも、HTML ではこう書くしかないし……。 <ul> <li>タブ 1</li> <li>タブ 2</li> <li>タブ 3</li

    html5にrole属性やstate属性なるものがあると聞きました。その使いどころは・・・? - 現状で使い道はあるのでしょうか... - Yahoo!知恵袋
  • http://blog.e-riverstyle.com/2011/01/rolewaiaria.html

    http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • Amazon Glacierとは何か? 説明会を開催 | gihyo.jp

    データの耐久性などはまったく同じで、Glacierはアクセスに時間がかかるぶん、費用がS3の約10分の1となっているわけです。Glecierだと1Tバイトのデータが1ヵ月約1000円程度で保管できる計算です。 このような特徴を持っているGlacierを、Amazonはこれまでテープでバックアップをしていたようなペタバイトクラスの大容量データを数年にわたる長期で保存する、といった用途を想定していると言います。 Glacierサービスの利用方法 具体的な利用方法ですが、まずは他のAWSのサービスと同様、Amazonにユーザ登録、ログインして「マネジメントコンソール」を立ち上げます。どのリージョンのGlacierサービスを利用するかを選択後、Vault(ボルト)を作成します。ここにデータをアップロードする単位のアーカイブを格納できます。このVaultに対してアクセス権限と、Amazon Simp

    Amazon Glacierとは何か? 説明会を開催 | gihyo.jp
  • 提供開始! 「Amazon Cloud Drive」 vs 「DropBox」の料金比較表

    アマゾンは15日、日向けのオンラインストレージサービスとして 「Amazon Cloud Drive」の提供を開始しました。 ユーザーは、無料で5GBまで利用することが可能です。 オンラインストレージ 「Amazon Cloud Drive」開始 「Amazon Cloud Drive」は初期状態で5GBも無料で使うことができますが 別途、有料のオプションも用意されていて必要に応じて1TB(1000GB)まで選択可能です。 また、どの契約も年契約となっています。 「Amazon Cloud Drive」と「DropBox」を比較してみた 「Dropbox」ユーザーとしては比較結果が気になるところです。 早速、「Amazon Cloud Drive」と比較してみました。 「DropBox」は【DropBox For Teams】というビジネス向けのサービスがありますが 今回は「Amazon

    pink_dark
    pink_dark 2013/05/08
    S3を使うよりも、Amazon Cloud Driveの方が安いのか。1TBで月額¥3500くらいか。
  • RAWデータの保存(NASとAWS)

    現像済みRAWデータも消さずにとりあえず保存してます。 現像し直すことはほとんどないんだろうけど… わが家の場合MBPrがSSD512GBモデルなので、NASとの併用が必須です。 まず現像済みJpegはFlickrにオリジナルサイズでアップロードでまあいいでしょう。 …で問題のRAWデータはNASに保存。 ちなみにうちは2年間くらいに買ったQNAPのTS-219P+ってモデルに 2TBのHDDを2いれてRaid1(ミラーリング)運用してます。 QNAPは自分で好きなHDD入れられるので、それを面倒くさいと感じない人にはオススメ。 今だったら4のモデルも安くなってるし、NAS用HDDなんてのも売られてるので、 Raid10な構成で組んじゃうのも、いいかもしれません(実際に2TBだとキツくなってきた) QNAPのS3設定画面 よく言われているように「ミラーリング≠バックアップ」

    pink_dark
    pink_dark 2013/05/08
    S3じゃなくてGlacierに保存すれば、価格が10分の1に抑えられるけど、バックアップ用途にしか使えないから、ちょっと用途が違うなあ。
  • | フォー・フュージョン株式会社

    SERVICE WebコミュニケーションNo.1カンパニーへ 当社の掲げる「Webコミュニケーション」とはインターネットユーザーの複雑化した購入検討プロセスを理解し、 企業からの一方的な情報発信ではなく消費者との双方向なコミュニケーションを発生させる事をさします。 企業が抱える課題・目標を解決するためのあるべきコミュニケーションを創造するのが 私たちの提供するトータルWebコミュニケーションサービスです。

  • チャットワークにビデオ会議がついてクラウド版Skypeとでも言うべきレベルに

    メールを駆逐するというコンセプトで開発されたチャットワークがニューデザインに一新され、新機能「ビデオ通話」や目の前の画面を相手に見せることができる「スクリーンシェア」を搭載したのが新「チャットワーク(ChatWork)」です。 クラウド型ビジネスチャットツール|チャットワーク (ChatWork) http://www.chatwork.com/ja/ これが新しいユーザーインターフェイスにリニューアルされたチャットワーク。 ◆1対1でのビデオ通話 ビデオ通話の開始方法は簡単、まず相手を選んでクリック 右上にあるビデオアイコンをクリック 「ビデオ通話」と「音声通話」が選択できるので「ビデオ通話」をクリック プラグインのインストールが必要な場合があるのでその場合は「プラグインをダウンロード」をクリック 「ファイルを保存」をクリックしてダウンロード開始 ダウンロードした「ChatWorkLiv

    チャットワークにビデオ会議がついてクラウド版Skypeとでも言うべきレベルに
    pink_dark
    pink_dark 2013/05/08
    チャットワークは良さげなんだけど、Google Appsとの併用だと高くつく。コミュニケーションツールが主なので、GAの代用にはならないし。部署規模で導入しても、メリットが薄いしなあ。悩ましい。
  • クラウドだけどプライベートさえあれば関係ないよねっ - サーバーワークスエンジニアブログ

    アマゾンさんが入っているビルのエレベータがあのダンボール風って当ですか? わたし、気になります! 具体的には遊びに行かせて下さい! このダンボールでお馴染みのアマゾンさん、利用したことがないという方はほとんどいらっしゃらないと思います。 このアマゾンさんがクラウドサービスもやっていることは御存知ですか?(御存知ない方が意外にいらっしゃいます) 「クラウドをやっていることは分かった。でも、サーバを立てたら公開されちゃうんだろ?」 いえいえ。アマゾンさんのクラウド(AWS)は、「私しか使えないクラウド」、プライベートなクラウドを作ることができるんです。 「データセンタを借りて、サーバを買って、プライベート・クラウドを作るぞ」と息巻く前に、下記の『続きを読む』をクリックして続きをお読み頂ければと思います。 5分程度で読めます。AWSでもプライベート・クラウドができるとお分かりいただけると思いま

    クラウドだけどプライベートさえあれば関係ないよねっ - サーバーワークスエンジニアブログ
  • 1