CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編 | POSTD
※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
html5のタグの入れ子のルールの保存版まとめです。「〇〇タグに〇〇タグって入れてもいいんだっけ？」という悩みを全部解決します！すべてw3cのコンテンツモデルの仕様に基づいた内容になっていますので安心して読んでくださいね。 入れ子のルールはコンテンツモデルで決まる html5からはブロック要素とインライン要素という概念が廃止されました。そのため以前まではインライン要素の中にブロック要素を入れてはいけないというルールがあったと思いますがそれは完全に無視してください。 とはいえcssでレイアウトを行う上では従来と変わらず display : blockで親要素の幅に合わせるdisplay : inlineでその要素自体が持つ幅 という指定の仕方はできます。 ただhtmlでタグの入れ子を考える上でブロック要素とインライン要素という概念がなくなっただけです。 じゃあなにが追加されたかというと、w3
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
まずはこれを読もう！HTMLが学べるおすすめ書籍10冊総まとめ
HTML学習のための環境が整ってきており、Web上で学習できたり、教室に通って勉強できるサービスが増えています。 ただ、書籍を買って自分で独学していくのもまた一つの方法です。教室に行く手間もなく、かつ無料のWebサービスよりも効果的に学習を進めることができるでしょう。 そこで今回は、HTMLを学習できる書籍をまとめました。 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
TalkieのスライドをPDF化するツール作った - blog::wnotes.net
お世話になったお礼に ここ最近ちょろちょろを小さな勉強会で話をさせて頂く機会があり、かといってスライドに時間を割けなかったので、 サクッとHTMLでスライドを作るのに @ahomu氏のTalkieを使わせてもらっていました。 ahomu / Talkie これほんと便利。さっくりいい感じにスライドが作れる。しかもVimで。 でも、PDFでSlideShareにアップしたりするのにPDF化するツールがなかったようなので（以前はあったらしい）、何か貢献できたらなーってことで思いついてから一日でさっくり作った。あとElectron使ってみたかったのもある。できたのがこちら。 ysugimoto / resumify npmでインストールして、スライドのあるディレクトリ、またはどっかにアップしてるスライドのURLを指定してコマンド実行すると、Electronが起動してパシャパシャとスクリーンショッ
Talkie.js - Web Components Based Presentation Library
# Talkie.js Web Components Based Presentation Library Go to [repository](https://github.com/ahomu/Talkie) ## Feature - Markdown supported - Code highlighting - Responsive scaling - FullScreen mode - Vertical Scrolling - Progress indicator - Accessibility supported ## 機能 (Japanese) - Markdown 書けるよ (੭ु˵＞ヮ＜)੭ु⁾⁾ - ハイライトばっちり _:(°ω° 」∠):＿ - レスポンシブだよ (^з^)-☆ - フルスクリーン対応 (｡•̀ᴗ-)✧ - 縦方向にスクロールできるよ (*´▽`) -
複数の外部JSファイルを読み込む時の実行順序について｜もっこりJavaScript｜ANALOGIC（アナロジック）
検証概要 検証1：ネットワークからのレスポンス速度の違うJSファイルの実行タイミング 検証2：ファイルサイズの違うJSファイルの実行タイミング 検証3：外部JSファイル、インラインスクリプト、スクリプト以外のタグの混在時の実行順序 まとめ これまであまり意識してこなかったのですが、JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか？と、ふと疑問に思いました。 大きなプロジェクトであればあるほど、肥大化したJavaScriptコードを機能毎に別ファイルに切り出し、体系的にJavaScriptコードを管理した方がメンテナンスもし易くなると思いますが、そいうったケースでは複数の外部JSファイルをHTMLファイル内に読み込むことになると思います。 そのような場合、JSファイル間で依存
GitHub - yorickpeterse/oga: Oga is an XML/HTML parser written in Ruby.
NOTE: my spare time is limited which means I am unable to dedicate a lot of time on Oga. If you're interested in contributing to FOSS, please take a look at the open issues and submit a pull request to address them where possible. Oga is an XML/HTML parser written in Ruby. It provides an easy to use API for parsing, modifying and querying documents (using XPath expressions). Oga does not require s
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
HTMLのテンプレート的なの - Qiita
head内に書くこと多すぎて嫌になる昨今。 あれがない、これがない、あれどう書くっけとならないためのエントリー。 気が向いたら追加したりしなかったりする予定。 viewport <meta name="viewport" content="width=device-width, initial-scale=1">
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積むとよりこの記事の内容への理解が深まるはずです。 HTML と CSS を書くときに大切なポイント2点 HTML と CSS を書くときに大切だと思うことを書きます。 1. HTML と CSS を書かない あなたがいま書いている HTML と CSS は、
HTMLとCSSクラスでよく使う命名について - Qiita
HTMLとCSSクラスの命名について 命名で使用する単語に迷います。どうしたらいいですか。 基本単語のみをつかって命名すればいいんだ！！ ブロックなど親要素で使えそうなclass名 container : コンテナ main : メイン global : グローバル home : ホーム hero : でかいブロック。bootstrapのサンプルにある inner : 中味。 outer : 囲っているもの。親。wrapperと同じ。 wrapper : 囲っているもの。親。 例えば、facebookのidだとおおまかに home > globalContainer > content > mainContainer ブロックや子要素で使えそうなclass名 article : articleタグがあるのであまり使いたくない。 block : 囲っているもの。 card : カード cel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
