Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ横並びを縦並びにするテーブルレスポンシブ疑似要素で見出しを用意するテーブルレスポンシブcontent:attr() で見出しを表現するテーブルレスポンシブspanで見出しを表現するテーブルレスポンシブスクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブPC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので、それらをb
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
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
目次 リダイレクトとは HTTPによるリダイレクト htmlのmeta refreshによるリダイレクト javascriptによるリダイレクト リダイレクト方法の使い分け meta refreshによるリダイレクト リダイレクトとは リダイレクトという言葉は「向きを変える)という意味で、主にホームページを移転した場合や特定のページのURLを変更した場合に、新しいURLへアクセスを転送する事を言います。 リダイレクトの方法としては、HTTPレスポンスによるもの、HTMLのmeta refreshによるもの、javascriptによるものがあります。 それぞれのリダイレクトの方法には特徴や注意点があります。順番に見ていきましょう。 HTTPによるリダイレクト 301リダイレクトや302リダイレクトなどで一般的に利用されている方法で、リダイレクトで最も良く使われるものです。 .htaccess
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback <details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。 折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣の
<header> <a class="logo" href="#">かわいい子犬急便!</a> </header> <article> <header> <h1>Beagles</h1> <time>08.12.2014</time> </header> <p> ビーグル犬が<em>実に</em>大好き!実に、めっちゃ。可愛くて、耳が実に、実にふわふわで気持ちいいの! </p> </article> .logo { background: left / cover url("/shared-assets/images/examples/puppy-header.jpg"); display: flex; height: 120px; align-items: center; justify-content: center; font: bold calc(1em + 2 * (100vw
はじめに HTML5の新たな要素としてtemplate要素 <template> がありますが、これを使うと何が便利になり何が嬉しいのか。 自分が後で見返すためのメモとして書き記しておきます。 template要素って何さ template要素はブラウザ上では表示されず、主にJavaScriptによる操作がメインになる要素です。 名前からもわかるようにテンプレートとして使うコンテンツを中に書いてJavaScriptであれこれできるやつです。 template要素内のコンテンツは、JavaScriptの操作で本文へと挿入されない限り本文に何も影響を与えません。 つまり、template要素内で <img> で画像を指定していても、挿入されるまでその画像はロードされることはありません。 <script type="text/template"></script> との違い script要素を
@) � Learn Learn web development Frontend developer course Getting started modules Core modules MDN Curriculum Check out the video course from Scrimba, our partner Learn HTML Structuring content with HTML module Learn CSS CSS styling basics module CSS layout module Learn JavaScript Dynamic scripting with JavaScript module
Rマーク(登録商標)とトレードマークはHTMLで次のように表します。 Rマーク: 記号 ® 実体参照 ® 数値参照 ® トレードマーク: 記号 ™ 実体参照 ™ 数値参照 ™ セミコロンもつきます。 出力例 ® ® ™ ™ アンド記号とセミコロンの間に reg や trade を入れると記号が出力されます。数値参照ではアンドにシャープを続けます。 著作権記号(コピーライト) コピーライト(著作権記号)はHTMLで次のように表します。 記号 © 実体参照 © 数値参照 © セミコロンもつきます。ページUTF8に設定している場合、実体参照で記述する必要はありません。そのまま直打ちで©と入力しても表すことができます。 参考 2019年に学ぶべきプログラミング言語まとめ(web系) 学生の時からプログラミング言語の勉強をしよう:自動化の波に乗らないと将来生きていけない
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 最近ルート相対パスなるものを知った。 衝撃的だった。自分の無知さに対して. 今更って感じだがまとめておく. あるときふと思った, 大規模なサイトはディレクトリ構造をどうしてるんだろう?と フォルダが増えると「../」が増えてややこしくなってくるし, 簡単に階層を変えれなくなってしまう. かといって絶対パスにしちゃうとドメインやフォルダ名に依存しすぎてしまう. とか思っていた. だがそんな問題はルート相対パスが解決してくれた. ルート相対パス これは、/ から始めるとルートディレクトリを基準にアクセスしてく
Web業界で仕事をしていくにあたって、もっとも重要なことのひとつは、最新技術を追い続けるということです。しかし、そこで困るのが、最新技術を試してみたいけど、どのブラウザだったら対応しているのか、ということだと思います。 そこで、ブラウザごとの技術対応状況が一覧で分かるWebサイトをご紹介していきたいと思います。 Can I Use... HTML5、CSS3、JavaScriptまで、幅広く対応していて、Web技術者にとって欠かせないWebサイトといっても良いくらい有名なサイトです。調べたい技術を検索ボックスに入力することで、ブラウザごと、さらにバージョンごとにも詳しく対応状況を一覧することができます。 MOBILE HTML5 その名のとおり、モバイルブラウザに特化してHTML5やCSS3の対応状況を確認することができます。Can I Use... よりもモバイルブラウザに多く対応してい
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イベント後などに読み込ませるみたいな手間がかかる。そのうえ、閲覧する端末によって最初に表示される領域は違うので、ど
���� Learn Learn web development Frontend developer course Getting started modules Core modules MDN Curriculum Check out the video course from Scrimba, our partner Learn HTML Structuring content with HTML module Learn CSS CSS styling basics module CSS layout module Learn JavaScript Dynamic scripting with JavaScript module
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない!」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
class, style, width, height, valign, align, cellspacing, cellpadding, border 等はExcelコピーで保持される内容がそのまま出力されます。 borderやその他多くの書式はclassで定義されています。(スタイルシートは別途記述が必要)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く