タグ

referenceとwebに関するkathewのブックマーク (366)

  • <details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN

    <details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。 折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <summary> 要素の内容が折りたたみウィジェットのラベルとして使用されます。 <details> ウィジェットは 2 つの状態のうち 1 つを取ります。既定の閉じた状態は <summary> を使用して指定されたラベル文字列(または <summary> がない場合はユーザーエージェントが定義した既定の文字列)とウィジェット自身による三角形だけを表示します。 ユーザーがウィジェットをクリックするか、フォーカスしてスペースバーを押すと、ウィジェットは「ツイスト

    <details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN
  • リンクのクリック時にJavaScriptを実行する - リンクのonClickの実装 (JavaScript プログラミング)

    リンクがクリックされたタイミングでJavaScriptを実行するコードを紹介します。 概要 ユーザーがリンクをクリックしたタイミングでJavaScriptを実行したいことがあります。 AタグのhrefにJavaScriptの処理を記述する方法と、onclick属性に実行したいJavaScriptの処理を記述する方式があります。 Aタグのonclick属性に実行したいJavaScriptを記述した場合、リンククリック後ページが遷移してしまいます。リンククリック時のページ遷移を防ぐためにhref属性に"#"を指定するか、"javascript:void(0);"を指定します。 href属性に"javascript:void(0);"指定した場合、モバイルのWebブラウザでは「リンクが無効です」のメッセージが表示される場合があります。モバイルでの利用も想定している場合は、href属性に "#"

    リンクのクリック時にJavaScriptを実行する - リンクのonClickの実装 (JavaScript プログラミング)
  • 属性セレクター - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    属性セレクター - CSS: カスケーディングスタイルシート | MDN
  • template要素についてのお勉強 - Qiita

    はじめに HTML5の新たな要素としてtemplate要素 <template> がありますが、これを使うと何が便利になり何が嬉しいのか。 自分が後で見返すためのメモとして書き記しておきます。 template要素って何さ template要素はブラウザ上では表示されず、主にJavaScriptによる操作がメインになる要素です。 名前からもわかるようにテンプレートとして使うコンテンツを中に書いてJavaScriptであれこれできるやつです。 <template id="template"> <p>これはテンプレートだよ</p> <p><img src="./this_is_template.jpg" alt="これはテンプレートだよ"></p> <div id="templateContent"></div> </template> template要素内のコンテンツは、JavaScrip

    template要素についてのお勉強 - Qiita
    kathew
    kathew 2020/02/17
    DOMとしては結構特殊な扱いで、jQueryからtemplate内の編集ができない(たとえばselectのoptionの絞り込みなど)。templateからひな形を取り出したあとでこねこねするように実装する必要があり
  • <input type="number"> - HTML: ハイパーテキストマークアップ言語 | MDN

    HTML チュートリアル HTML の基 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>

    <input type="number"> - HTML: ハイパーテキストマークアップ言語 | MDN
  • Url - 3.10

    Url¶ class Cake\View\Helper\UrlHelper(View $view, array $config = [])¶ UrlHelper は他のヘルパーから URL を生成することが容易になります。 アプリケーションのヘルパーでコアヘルパーをオーバーライドすることによって URL の生成方法を カスタマイズする単一の場所を提供します。このやり方は ヘルパーの別名 セクションをご覧ください。 URL の生成¶ Cake\View\Helper\UrlHelper::build(mixed $url = null, boolean|array $full = false)¶ コントローラーとアクションの組み合わせを指定することで URL を生成して返します。 $url が空の場合、 REQUEST_URI を返します。そうでない場合、 コントローラーとアクションの組み合

  • 【初心者向け】Sassをいい感じに活用する

    初心者の方に向けて、Sassでよく使う機能を書きました。 機能の説明と、実際の活用事例をまとめました。 ネスト(入れ子) ネストして記述することで、コンパイル時に親セレクタを頭につけてCSSを生成してくれます。 ▼SCSS

    【初心者向け】Sassをいい感じに活用する
  • <link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語 | MDN

    HTML チュートリアル HTML の基 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>

    <link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語 | MDN
  • REST - 3.6

    REST¶ 最近のアプリケーションプログラマーは、サービスのコア機能を ユーザーにオープンにする必要があると気付き始めています。 簡単に提供でき、自由にコア API にアクセスできれば、広く受け入れられ、 マッシュアップされたり、簡単に他のシステムと統合できます。 簡単にあなたの作ったアプリケーションロジックにアクセスさせる方法は色々ありますが、 REST はその中でもすばらしい方法でしょう。とてもシンプルで、大抵は XML ベース (SOAP のようなものではなく、単純な XML のこと) で、HTTP ヘッダーによって制御されます。 CakePHP を使って REST の API を提供するのはすごく簡単です。 簡単なセットアップ¶ REST を動かすための手っ取り早い方法は、 config/routes.php ファイルに リソースルート をセットアップするための数行を追記することで

  • <a>-HTML5タグリファレンス

    <a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>~</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点(出発点)や終点(到達点)とすることができます。 <a>は、anchor(アンカー)の略です。 anchorを日語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。 href属性は、ハイパーリンク先のURLを指定する際に使用します。 href属性の値には相対パスと絶対パスのどちらでも指定することができます。 相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、 同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。 絶対パスと

    kathew
    kathew 2018/07/26
    HTML5になった時点でブロック要素を囲んで良くなったのね。便利
  • PHP: key - Manual

    Getting Started Introduction A simple tutorial Language Reference Basic syntax Types Variables Constants Expressions Operators Control Structures Functions Classes and Objects Namespaces Enumerations Errors Exceptions Fibers Generators Attributes References Explained Predefined Variables Predefined Exceptions Predefined Interfaces and Classes Predefined Attributes Context options and parameters Su

    kathew
    kathew 2018/03/28
    最近だとarray_filterで複雑な条件で一意の値を取り出した時、取り出した値のキーを取得するのに使った。便利
  • お疲れさまXMLHttpRequest、こんにちはfetch - Qiita

    Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し

    お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
  • Node: nodeName プロパティ - Web API | MDN

  • Element: tagName プロパティ - Web API | MDN

    Document Object ModelElementインスタンスプロパティariaAtomicariaAutoCompleteariaBusyariaCheckedariaColCountariaColIndexariaColIndexText (en-US) Experimental ariaColSpanariaCurrentariaDescriptionariaDisabledariaExpandedariaHasPopupariaHiddenariaKeyShortcutsariaLabelariaLevelariaLiveariaModalariaMultiLineariaMultiSelectableariaOrientationariaPlaceholderariaPosInSetariaPressedariaReadOnlyariaRelevant Non-standa

    Element: tagName プロパティ - Web API | MDN
  • Element.outerHTML

    ElementオブジェクトのouterHTMLプロパティは、その要素自身と中身のHTMLを含みます。要素自身も含んでいるのがinnerHTMLプロパティとの違いです。 <p><span id="date">2014年6月10日</span>、私は<a href="https://syncer.jp/">SYNCER</a>というウェブサイトを開設した。</p>

    Element.outerHTML
  • HTML5/テキスト/a要素 リンクを設定する - TAG index

    href属性を指定しない場合は、その他の任意属性(hreflang属性、type属性、rel属性、target属性、download属性、ping属性、referrerpolicy属性)も指定できません。 a要素にitemprop属性(グローバル属性)が指定されている場合は、href属性も指定する必要があります。 各属性の詳細については、下記のページを参考にしてください。 リンク先の表示方法を指定する ダウンロード用のリンクを指定する リンク先にアクセスする際のリファラーポリシーを指定する リンクのクリック時にpingを送信する リンクの設定方法 リンクを設定したい場合は、リンク先のURLをhref属性で指定します。 <p><a href="example.html">リンクテキスト</a></p> a要素の内容について HTML5以降、a要素の内容に(従来で言う)ブロックレベル要素も配置

    HTML5/テキスト/a要素 リンクを設定する - TAG index
    kathew
    kathew 2018/01/22
    "a要素の内容には、(従来で言う)ブロックレベル要素も配置できるようになりました。そのため、次のように段落ごとリンクを設定することが可能です。"
  • CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN
  • 【CSS3】@keyframes と animation 関連のまとめ - Qiita

    はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって? アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内

    【CSS3】@keyframes と animation 関連のまとめ - Qiita
  • grid-template-rows - CSS: カスケーディングスタイルシート | MDN

  • HTML5 ドキュメントのセクションとアウトライン - HTML | MDN

    警告: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。 HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。 意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして <div> 要素

    HTML5 ドキュメントのセクションとアウトライン - HTML | MDN