タグ

関連タグで絞り込む (23)

タグの絞り込みを解除

HTML5に関するicicaのブックマーク (12)

  • HTML5 入れ子チートシート | 吉川ウェブ

    HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

    HTML5 入れ子チートシート | 吉川ウェブ

  • RubyでWebを操作できるMechanizeの利用例を集めてみた | Scimpr Blog

    公式mechanize.rubyforge.org/ 使い方などMechanize について 楽々スクレイピング! Ruby Mechanizeの使い方 楽々スクレイピング! Ruby Mechanizeの使い方(2) リンクmechanizeでどんなことができるのか色々知りたかったので、使い方でなく実用例ぽいものを集めてみた. リンク先のコードは古いのもあって動かないかも そもそも公式のグーグル検索がそのまま動かないという DoCoMoの請求書を毎月Evernoteに送信してチェックするカスペルスキーのサイトからウィルスレベルをスクレイピングして、つぶやく。RubyのMechanizeではてなブログへ投稿RailsCastsの動画をタグごとにダウンロードしてくるスクリプトニコニコ動画の動画をダウンロードauの請求書を取得ソフトバンクの請求書を取得ゆうちょ銀行のログインとか取得かrubyの

    RubyでWebを操作できるMechanizeの利用例を集めてみた | Scimpr Blog

  • 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita

    はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ

    旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita

  • 今日から使える！HTML5,CSS3のコーディングメモ7個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

    こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 ちょっと前からHTML5.1やCSS4が話題になっていますね。 とはいえ、まだHTML5やCSS3の内容さえ把握できてないよ！という方も多いのではないでしょうか。(´ω｀) そこで今回は、あえてHTML5,CSS3の小ネタを紹介してみたいと思います。 すぐに実務で使えるものばかりなので、ぜひお試しあれ！ HTML5、CSS3のコーディングメモ7個 1. どんなサイズの画像でも固定サイズの枠にいい感じに表示させる方法 imgタグではなく、divなどのタグにインラインでbackground-imageに画像のパスを指定し、background-size: coverを用いることでいい感じの見栄えにすることができます。 メディアサイトやブログサイト、複数人で運用していてルールを統一しづらいプロジェクトなどで有

    今日から使える！HTML5,CSS3のコーディングメモ7個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

  • [HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita

    こんなsectionは○○だ 1.見出しが無い 見出しが無い/用意できない =　章や節ではない = sectionじゃない 2.段組みのためだけに使う sectionはdivの代わりじゃない セマンティクスを意識しよう nav サイトナビゲーションセクションを表す。 <nav> <ul> <li><a href='/'>サイトトップ</li> <li><a href='/about'>このサイトについて</li> <li><a href='/contact'>お問い合わせ</li> </ul> </nav> こんなnavは○○だ 1.nav要素を大量に使っている nav要素を使うことができるのは、そのサイトにとって主要なナビゲーションだけ。 多くても３つくらい たとえば、ヘッダメニュー、サイドメニュー、ぱんくずリストはnav 検索ボックス、リンク集は非nav 2.リストじゃない セマンティ

    [HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita

  • [42-3] link要素の「rel属性」の値（リンクタイプ）

    [42-3] link要素の「rel属性」の値（リンクタイプ） 最終更新日：2019年07月05日 （初回投稿日：2012年06月29日） <link>要素の「rel属性」と「hreflang属性」で指定した「他言語版ページ」がある場合、検索エンジンはユーザの言語環境にあわせて自動的に検索結果を切り替えることができます。 そのほかにも「rel属性」を使って、検索エンジンに情報を提供することができます。 今回は、<link>要素の「rel属性」の値（リンクタイプ）と、その使い方を見てみましょう。 <link>要素は内容が多いため 記事を分けています。 [42-1] link要素で 外部CSSファイルの読み込み・グループ化をしよう <link>要素全体の話と、外部CSSファイルの読み込み方法 [42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう media属性で

    [42-3] link要素の「rel属性」の値（リンクタイプ）

  • HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ | Stronghold Archive

    HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ どうもこんばんは。Toshikuraです。今回のTipsは【HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ】です。以前「HTML5 audio 音源の拡張子やブラウザの対応状況」という記事でも一部書きましたが、本記事はより具体的な続編です。タイトルでは”等”と省略しましたが、音の再生、一時停止、特定時間への移動、スキップ、リセット、ミュート、再生速度の上げ下げ、再生時間の取得、合計時間の取得、ボリュームの指定、jQueryを使ったオリジナルプログレスバーの設定、はたまた再生中やボリューム変更等のタイミング取得が対象になります。 はじめに まずはじめに、HTML5でのaudioタグの基本的な記述です。このタグにloopやcon

  • Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

    バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が

    Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

  • HTML5カルタ付きが嬉しい、ウェブ制作の現場で使えるHTML5のテクニックを磨くための一冊 -HTML5マークアップ

    書店に並んでいるHTML5の本の多くは、たくさんの仕様を網羅した分厚い本だったり、初心者向けのイラストが非常に多い入門書だったりしますよね。 今日オススメするのは、HTML4.01やXHTML1.0からHTML5に移行したい、また移行したてのウェブ制作者に役立つ知識が学べる「HTML5マークアップ」です。

  • HTML5/CSS3のテンプレートのまとめ | コリス

    商用でも無料でいいの？というくらい美しくデザインされたHTML5/CSS3のテンプレートを紹介します。 デザインだけでなく、ページ内に取り入れたエフェクトもなかなか面白いものが揃っていますよ。 Brushed デモ ミニマルなデザインが美しい1ページスクロール。パララックスの使い方、固定ヘッダの配置方法、ナビゲーションやパネルのエフェクトなど、随所にセンスが光ります。 個人・商用利用無料。

  • フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法

    フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏

  • IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス

    Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ

  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.