phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 最近ルート相対パスなるものを知った。 衝撃的だった。自分の無知さに対して. 今更って感じだがまとめておく. あるときふと思った, 大規模なサイトはディレクトリ構造をどうしてるんだろう？と フォルダが増えると「../」が増えてややこしくなってくるし, 簡単に階層を変えれなくなってしまう. かといって絶対パスにしちゃうとドメインやフォルダ名に依存しすぎてしまう. とか思っていた. だがそんな問題はルート相対パスが解決してくれた. ルート相対パス これは、/ から始めるとルートディレクトリを基準にアクセスしてく
HTML5・CSS3のブラウザ対応チェックサイト3選 | Webデザイン・Webデザイナースクール
Web業界で仕事をしていくにあたって、もっとも重要なことのひとつは、最新技術を追い続けるということです。しかし、そこで困るのが、最新技術を試してみたいけど、どのブラウザだったら対応しているのか、ということだと思います。 そこで、ブラウザごとの技術対応状況が一覧で分かるWebサイトをご紹介していきたいと思います。 Can I Use... HTML5、CSS3、JavaScriptまで、幅広く対応していて、Web技術者にとって欠かせないWebサイトといっても良いくらい有名なサイトです。調べたい技術を検索ボックスに入力することで、ブラウザごと、さらにバージョンごとにも詳しく対応状況を一覧することができます。 MOBILE HTML5 その名のとおり、モバイルブラウザに特化してHTML5やCSS3の対応状況を確認することができます。Can I Use... よりもモバイルブラウザに多く対応してい
<link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ
contenteditable - HTML: ハイパーテキストマークアップ言語 | MDN
contenteditable グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。 この属性は、以下の値のうち一つを取る必要があります。 true または 空文字列: 要素が編集可能であることを示す false: 要素が編集不可であることを示す plaintext-only: 要素の生のテキストは編集可能だが、リッチテキスト形式が無効であることを示す この属性が値なしで指定された場合、たとえば <label contenteditable>Example Label</label> のような場合、値は空文字列として扱われます。 この属性が存在しないか、値が無効であった場合、値は親要素から継承されます。したがって、親が編集可能であればこの要素は編集可能になります。 なお、許可されている値は tr
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要素の内容に（従来で言う）ブロックレベル要素も配置
HTML の br タグを CSS だけで消す方法
HTML に br という要素がありますね。 4.6 Text-level semantics — HTML5 The br element represents a line break. ということで、改行を表すということになってます。 以前は <br /> が不要なら <br /> を入れなきゃいいじゃない というだけの話だったんだけど、 最近これを有効にしたり無効にしたりと切り替えたくなることがあります。 例えばいわゆるレスポンシブデザインでサイトを組むときに 大きな画面なら表示範囲にゆとりがあるから改行を入れて広く使ってもいいけど スマートフォンなどの画面でそれをやると一目に入る情報量が減っちゃうから そのときだけ br をなかったことにしたいという具合に。 考えたこともやったこともなかったんだけど、 これ実に簡単な話でした。 display: none; にする 要するに br
日本語で単語の途中で改行させないように頑張る - Qiita
やりたいこと HTML上で「メールアドレス」という単語が画面幅の都合上、 メールア ドレス と改行されることがあり、これを メール アドレス のように単語で区切って改行されるようにしたい。 結果 とりあえずこういう感じにマークアップすればよかった。 （注：実運用では間違ってもspan全体に指定しないこと） <!doctype html> <meta charset="utf-8"> <style> span { white-space: nowrap; } </style> <div> <span>私</span><wbr><span>は</span><wbr><span>日本語</span><wbr><span>を</span><wbr><span>勉強</span><wbr><span>して</span><wbr><span>い</span><wbr><span>ます。</span>
ゼロからはじめるHTML5でのサイト制作／第4回 HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう - MdN Design Interactive
【セクションに分けた原稿をいままで通りにマークアップ】 ＜h1＞MdN Design Interactive＜/h1＞ ＜p＞Webデザインとグラフィックの総合情報サイト。プロのWebデザイナーやグラフィックデザイナーはもちろん、プロを目指す方のための情報を毎日更新＜/p＞ ＜h2＞ゼロからはじめるHTML5でのサイト制作＜/h2＞ ＜p＞本連載は、HTML5をはじめてやってみようという人に、HTML5のマークアップの基本から新要素の使い方、スマートフォンサイト作成などサンプルを作りながら学んでいきます。＜/p＞ ＜h3＞第1回 HTML5でサイトをつくろう！xhtmlからHTML5へ＜/h3＞ ＜p＞最近話題になっているHTML5ですが、どこからやっていけばいいのか？ 書籍やWEBサイトを見ると派手なことができそうだけど難しいのではないか？ そう思っている人も多いと思います＜/p＞ ＜h
HTML5 ドキュメントのセクションとアウトライン - HTML | MDN
警告: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。 HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。 意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして <div> 要素
<ruby>－HTML5タグリファレンス
<ruby>・<rt>・<rp>は ルビをふる際に使用します。 <rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。 <rt>と<rp>は、<ruby>～</ruby>の中で子要素として使用します。 <rp>～</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。 <ruby>タグに対応していないブラウザでは、 漢(かん)字(じ) のように表示されます。 ■HTML4.01からHTML5へのバージョンアップによる変更点 <ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。 ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。 HTML
htmlの復習とHTML5のお勉強 - Qiita
<!DOCTYPE...> <html> <head> ヘッダ情報 </head> <body> コンテンツ内容 </body> </html> タグに使用する文字はXHTMLは特定の部分を除き小文字で記述する決まりがあるが、 HTMLは特定の部分を除き大文字小文字どちらでも良い。 将来を見据えてHTMLも小文字で統一しておくのがよさそう。 ちなみにhtml5でのDOCTYPEは<!DOCTYPE …と記述することが多いが、実際は大文字小文字どちらでも構わない。 しかしSGML/XMLではDOCTYPEを大文字で記述する必要があるため、HTML5でも大文字で書かれることが多い。 DOCTYPE(DTD)宣言 一行目には、HTMLバージョンのDOCTYPE(DTD)宣言を記述し、その仕様での文法を利用しなくてはならない。 HTML4以前では上手に読んでもらうため長々とした（しかし必要な）記述
フォームデータの送信 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
よく使うHTMLひながた ＞ 都道府県一覧セレクトフォーム｜ahref.org
北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 <select name="pref_id"> <option value="" selected>都道府県</option> <option value="1">北海道</option> <option value="2">青森県</option> <option value="3">岩手県</option> <option value="4">宮城県</option> <option value="5">秋田県
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
スクロールが生じたtableの左右上下の列や行などを固定出来るスクリプト・「TableHeadFixer」
CodePen - Front End Developer Playground & Code Editor in the Browser
CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]![CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b4bb8a4a33a630fad5b2f5407193da0266fb2eb/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466210908981s.jpg)
<input autofocus>－HTML5タグリファレンス