タグ

HTMLに関するteroma2のブックマーク (22)

  • リッチスニペットで検索結果をより分かりやすく

    メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。

    リッチスニペットで検索結果をより分かりやすく
  • [CSS]コピペでOK!画像のホバー時用のかっこいい新しいエフェクトのまとめ

    HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111

  • jqueryでロールオーバー(マウスで触ったときに画像が変わる)する方法

    ボタンを触ったときに画像を変更させるロールオーバーは良く使いますよね。 jqueryを使っての簡単ロールオーバーする方法を紹介します。 $(function(){ $("img[src=’img/button.gif’]").mouseover(function(){ $(this).attr("src","img/button_on.gif"); }).mouseout(function(){ $(this).attr("src","img/button.gif"); }); }); 解説 $("img[src='img/button.gif']").mouseover 画像を$(“img[src=’img/button.gif’]”)で選択して、 mouseoverでマウスが画像の上にのったときに下記のイベントが実行されます。 (function(){ $(this).attr("sr

    jqueryでロールオーバー(マウスで触ったときに画像が変わる)する方法
  • タグの閉じ忘れをチェックするブックマークレットが便利。 | バニデザノート

    タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマークツールバーに入れるだけ。 あとは、チェックしたいページで さきほどブックマークツールバーに入れたブックマークを押すと 自動でチェックしてくれます! ご参考にどうぞ。 HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] 関連記事 セリフ体をうまく利用しておしゃれな印象の4サイト 2011/12/26 Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 2011/12

    タグの閉じ忘れをチェックするブックマークレットが便利。 | バニデザノート
  • 検索フォームをCSSでデザインするサンプル集 | CSS Lecture

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • HTMLタグ/フォームタグ/セレクトボックスを作る - TAG index

    上記の属性は、select要素とoption要素のどちらにも指定することができます。しかし、option要素に対するこの属性の指定は、一部のブラウザでは対応していないようです。 disabled (部品を無効化する) この属性が指定された部品は、選択することができなくなります。

    HTMLタグ/フォームタグ/セレクトボックスを作る - TAG index
  • 新しく追加した Google カスタム検索エンジンの HTML をカスタマイズする方法。

    Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基スタンス。 btmup Blog 最近、Google カスタム検索エンジンのコードが変更されたみたいです。それも大幅に。 以前までは HTML ソースを直接貼り付ける方法だったんですが、新しいコードは JavaScript を使って HTML を呼び出しています。 前まではこんな感じ↓だったんですが、 <form action="http://www.google.com/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" /> <input type="hidden" name="ie" value="UTF-8" /> <input ty

  • 基本的なフォーム -- ごく簡単なHTMLの説明

    この例をもとに、HTMLのフォームを構成する要素を順番に説明していきます。この例のHTML全体は、章の最後で改めて紹介します。 フォームの基枠組み データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。フォームはこのための手段を提供します。 HTMLのフォームは、データを入力するための手段(コントロールと呼びます)と、それに関するラベルや説明から構成されるひとまとまりのセクションです。「何を」送信するかを示すためにこのセクションの範囲を明示し、「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。 form要素の構造 form要素タイプは2つの主要な属性を持ちます。ひとつは「どこに」、つまりデータを受け取るプログラムを指定するaction属性、もうひとつが「どうやって」、つまりデータの送信方法を指定するmethod属

    teroma2
    teroma2 2011/12/19
    input要素
  • 拡張子とMIMEタイプ - とほほのWWW入門

    ファイル名の最後のドット(.)から後ろの部分を『拡張子』と呼びます。index.html の拡張子は .html で、title.gif の拡張子は .gif です。拡張子はそのファイルが何であるかを示します。例えば、.htmlHTML文書、.txt はテキスト文書、.gif は GIF画像、.jpg は JPEG画像のファイルであることを示しています。 Windows では、標準の設定では拡張子は表示されません。[スタート]-[(すべての)プログラム]-[アクセサリ]-[エクスプローラ] を起動し、[ツール]メニューの [フォルダオプション]-[表示] で、[登録されている拡張子は表示しない] のチェックをオフにしてください。 また、Windows では、ファイルをダブルクリックした時の動作はこの拡張子によって決まります。例えば .txt のファイルをダブルクリックすると [メモ帳]

    teroma2
    teroma2 2011/12/19
    「Webの世界では拡張子という概念と、もうひとつ『MIMEタイプ』という概念があります。MIMEタイプとは「タイプ名/サブタイプ名」の形式の文字列で、WEBサーバーとWEBブラウザの間はこのMIMEタイプを用いてデータの形式を指
  • HTMLタグ/HTML要素一覧/input 要素 - TAG index

    この要素がform要素内に配置されている場合は、name属性の有効範囲はそのform要素内に限られます。 name属性の値は、入力されたデータ(またはvalue属性の値)とセットで送信されることになります。 type属性の値がtextまたはpasswordの場合は、value属性の値が入力欄に表示されます。 type属性の値がsubmit reset buttonの場合は、value属性の値がボタン上に表示されます。 type属性の値がradioまたはcheckboxの場合は、value属性が必須となります。 type属性の値がtextまたはpasswordの場合は、size属性の値を文字数で指定します。(それ以外の部品に対してはピクセル数で指定しますが、実際にはその指定の効果はないようです) maxlength属性の指定は、type属性の値がtextまたはpasswordの場合に有効とな

    HTMLタグ/HTML要素一覧/input 要素 - TAG index
    teroma2
    teroma2 2011/12/19
  • HTMLタグ/フォームタグ/隠しデータを送信する - TAG index

    type="hidden" (隠された部品を作成) type属性の値に hidden を指定すると、画面上には表示されない隠された部品を作成できます。 name="" (部品の名前を指定) フォーム部品を識別するための名前を指定します。 この属性の値は、value属性の値とセットで送信されることになります。 value="" (送信される文字列を指定) この属性の値が、データとして送信されることになります。 隠しデータについて このフォーム部品で設定されたデータは、ブラウザの画面上には表示されません。(ただし、ソースを見れば確認することができます) 予め設定しておいたデータを、CGI等のプログラムに送信したい場合などに使用します。 使用例 <form method="post" action="example.cgi"> <p>隠しデータ<br> <input type="hidden"

    HTMLタグ/フォームタグ/隠しデータを送信する - TAG index
    teroma2
    teroma2 2011/12/19
  • HTMLの構造化と厳格化|SEO会社による実践テクニック

    当サイトは2008年頃までに作成されたものをモバイル端末向けに再設計したものです。 現在では有効ではない情報が多いので、技術情報ではなくSEOの黎明期に想いを馳せる読み物としてご利用ください。 決定打にこそなりませんが、SEOにおいて唯一自己の技術だけで解決できる要素なので、やらなければ損です。 HTMLの厳格化(NGタグや属性の撤廃) 当ページの主意と矛盾するようですが、基的に冗長なタグや属性、あるいは少々の構文ミスがあってもSEOには「ほとんど」影響しません。 しかし「ほとんど」という点が、SEOでは非常に問題になります。何故なら無頓着な人がつくったサイトのNG箇所はソースの大半を占めることもあり、こうなると目に見える違いが出てきます。 装飾のためのタグはCSSに代替 ここでいう装飾とは主に次のようなものを指します。

  • XHTML 1.0 - Differences with HTML 4

    目次 4.1. 文書は整形式でなければならない 4.2. 要素名と属性名は小文字でなければならない 4.3. 非空要素に対しては終了タグが必須 4.4. 属性値は常に引用符でくくらなければならない 4.5. 属性の最小化 4.6. 空要素 4.7. 属性値内の空白の取り扱い 4.8. スクリプトとスタイル要素 4.9. SGML 排除機能 4.10. 'id' と 'name' 属性を持つ要素 4.11. 定義済み値セットを持つ属性 4.12. 16進数値の実体参照 セクションは参考的。 XHTML は XML 応用言語であるという事実により、SGMLベースの HTML 4 [HTML4] では完全に合法的であった特定の実践は変更されなければならない。 4.1. 文書は整形式でなければならない (Documents must be well-formed) 整形式は [XML] で導入さ

  • Another HTML-lint gateway

    HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 33,323 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下の

    teroma2
    teroma2 2011/12/06
    HTML文書の文法をチェックし、採点します
  • HTMLとCSSだけで作るFacebookの「いいね!(like)」ボタン : web memo.Ver.2

    Facebookを利用するようになって各種サイトにおいてある「いいね!(like)」ボタンを自然に押すようになった。ボタンをおいてないところもlike bookmarkletなんかで押せるから問題ないと言えば問題ないものの、やはりサイトにおいてあった方が目に付くし押しやすいという事実はどうしても感じてしまう。 ところが先日記事ごとに「いいね!」ボタンをおいていたサイトにアクセスしたら、ボタンが消えてしまっていた。話によると「(ページ自体が重いので)軽くするために外してしまった」らしい。確かにいいね!ボタンはiframeかJavaScript(XFBML)を使って表示するしかなく、インラインフレームの読み込み時間も相まって少々重いパーツになってしまっていると思う。 しかしこれで納得してしまっては面白くないので、フレームを使わない簡単なHTMLCSSだけでブログなどに設置できるいいね!ボタン

    HTMLとCSSだけで作るFacebookの「いいね!(like)」ボタン : web memo.Ver.2
  • とほほのWWW入門

    はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (

  • <table> - テーブル(表) - とほほのWWW入門

    border=n [非推奨] H3/e2/Ch/Fx/Sa/Op/N2 枠線の太さを指定します。この属性を記述しない、または、0 を指定すると枠線を表示しません。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いるようになります。HTML Living Standard では廃止されました。 bordercolor=color [非推奨] e2/Ch/Fx/Sa/Op/N4 枠線の色を指定します。HTML5 には採用されていません。代わりに border-color を使用してください。 bordercolordark=color [非推奨] e2 立体的な枠線の暗い部分の色を指定します。 bordercolorlight=color [非推奨] e2 立体的な枠線の明るい部分の色を指定します。 frame=frame [非推奨] H4-4/e3/Ch/Fx/Sa/Op 各セ

  • グーグル、FlashをHTML5に変換するツール「Swiffy」を発表

    Googleは、FlashファイルをHTML5に変換するツール「Swiffy」を発表した。SWFファイルにこのツールを適用すると、SWFファイルがJSONファイルに変換され、HTMLSVGScalable Vector Graphics)、CSS(Cascading Style Sheets)を使ってレンダリングされる。Googleによれば、変換されたファイルのレンダリングパフォーマンスは非常によく、ファイルサイズはオリジナルよりわずかに大きくなるという。 Adobe Systemsも、2011年に入って同様のツール「Wallaby」を発表している。このツールは、FLA形式のファイルを、HTML5、JavaScriptCSSに変換するものである。 Googleは、Swiffyに関するFAQで、Adobeは「FlashプラットフォームがFlashプレーヤーをサポートしていないデバイスに

    グーグル、FlashをHTML5に変換するツール「Swiffy」を発表
  • MdN Design|総合情報サイト

    スタイルの付与・常套テクニックを使う CSSを分けて記述する 次にスタイルを定義していく。このようにシンプルなデザインの場合は、常套(じょうとう)的に使われているテクニックで効率的に制作できる。 CSSを設定するには<link>要素を用いて、href属性にパスを指定する。ここではほかに、type属性とrel属性・media属性を指定している。これらの属性について説明すると、<link>のtype属性はhrefで指定されるコンテンツ(この場合はCSSファイル)のMIMEタイプに関する情報を与えることができる。rel属性は、そのコンテンツとの関係性を述べ、media属性は意図する出力メディアを指定できる。ここでは「all」と指定しているので、すべてのメディアに対してこのCSSが適用されることになる。 この<link>属性に割り当てられているのは、CSSをインポートするのみの役割を持ったCSS

    MdN Design|総合情報サイト
  • 【HTMLタグの簡単検索】TAG index - ホームページ作成情報

    リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。

    【HTMLタグの簡単検索】TAG index - ホームページ作成情報