【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ 横並びを縦並びにするテーブルレスポンシブ 疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブ スクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
HTML Living Standard
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
htmlのmeta refreshを使ったリダイレクト設定
【無料】ねぎお社長のSEOメールマガジン※30秒で登録完了 購読者数は既18000人を突破！ SEO業界20年のねぎお社長が最新情報、ノウハウ、考え方などこのメルマガでしが入手できない情報を配信。SEO,コンテンツマーケティングで売上を上げたい方は、是非、ご購読下さい。 詳細はこちら リダイレクトとは リダイレクトという言葉は「向きを変える）という意味で、主にホームページを移転した場合や特定のページのURLを変更した場合に、新しいURLへアクセスを転送する事を言います。 リダイレクトの方法としては、HTTPレスポンスによるもの、HTMLのmeta refreshによるもの、javascriptによるものがあります。 それぞれのリダイレクトの方法には特徴や注意点があります。順番に見ていきましょう。 HTTPによるリダイレクト 301リダイレクトや302リダイレクトなどで一般的に利用されている
<details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。 折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <summary> 要素の内容が折りたたみウィジェットのラベルとして使用されます。 <details> ウィジェットは 2 つの状態のうち 1 つを取ります。既定の閉じた状態は <summary> を使用して指定されたラベル文字列（または <summary> がない場合はユーザーエージェントが定義した既定の文字列）とウィジェット自身による三角形だけを表示します。 ユーザーがウィジェットをクリックするか、フォーカスしてスペースバーを押すと、ウィジェットは「ツイスト
templateタグをjQueryで操作しようとしたらハマった話 - Qiita
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script> if ('content' in document.createElement('template')) { var clone = $($('#productrow').html()); $('td', clone).eq(0).text('0384928528'); $('td', clone).eq(1).text('Acme Kidney Beans'); $('tbody').append(clone); } </script>
<header> - HTML: HyperText Markup Language | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
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
<input type="number"> - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
Rマーク（登録商標）とコピーライト（著作権記号）をHTMLで表す - Rollpie
Rマーク（登録商標）とトレードマークはHTMLで次のように表します。 Rマーク： 記号 ® 実体参照 ® 数値参照 ® トレードマーク： 記号 ™ 実体参照 ™ 数値参照 ™ セミコロンもつきます。 出力例 ® ® ™ ™ アンド記号とセミコロンの間に reg や trade を入れると記号が出力されます。数値参照ではアンドにシャープを続けます。 著作権記号（コピーライト） コピーライト（著作権記号）はHTMLで次のように表します。 記号 © 実体参照 &copy; 数値参照 &#169; セミコロンもつきます。ページUTF8に設定している場合、実体参照で記述する必要はありません。そのまま直打ちで©と入力しても表すことができます。 参考 2019年に学ぶべきプログラミング言語まとめ（web系） 学生の時からプログラミン
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... よりもモバイルブラウザに多く対応してい
Bodyに<link rel=stylesheet>を入れてCSSをロードする未来 - Qiita
https://jakearchibald.com/2016/link-in-body/ の「The future of loading CSS」についての簡単なメモ（抄訳ではない）。詳細はリンクを参照していただきたい。おすすめです。 CSSは普通headで最初の方に読み込ませるんだけど、Critical Rendering Path を最適化することを考えると、最初に表示される箇所など必要最小限のCSSだけをhead内で読み込んで、あとは遅延読み込みしたりしてレンダリングをブロックさせないようにした方がいい（そして量が少なければinline CSSにする）。でもscriptタグのasync属性のようにCSSを非同期的に読み込む手段がないから、Javascript使ってloadイベント後などに読み込ませるみたいな手間がかかる。そのうえ、閲覧する端末によって最初に表示される領域は違うので、ど
<link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
ExcelからHTMLテーブル変換 Ver.2
インデント trとtdの改行 テーブル表現 セル内改行 thやdtの使用 セル内のタグ リンク 画像 class style width height valign align cellspacing cellpadding border class, style, width, height, valign, align, cellspacing, cellpadding, border 等はExcelコピーで保持される内容がそのまま出力されます。 borderやその他多くの書式はclassで定義されています。(スタイルシートは別途記述が必要)
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Standard 日本語訳
https://punimeister.com/posts/maintenance-html/
ブログへの表挿入に。エクセル表からHTMLテーブルを作ってくれるツールが便利すぎる
