メディアクエリーの使用 - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
知ってた？JavaScriptでメディアクエリを利用するちょっとしたテクニック
Web制作ですっかり定番となったメディアクエリを使ったレスポンシブ Webデザイン。JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。 テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイルシートを適用しています。 以下の例はcssbasic.cssをすべてのデバイスに適用して、水平方向の画面幅が500ピクセル以上なら、csswide.cssも適応します。 <link rel="stylesheet" media="all" href="cssbasic.css" /> <link rel="stylesheet" media="(min-width: 500px)" href="
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
media query のスクリーン幅と jQuery(window).width() の関係 - Qiita
のような行が CSS ファイルにあってこのスタイルの切り替えと共に JavaScript コードの動作も切り替えたいとします。そこでそのまま以下のようなコードを書いたとします。 しかし、これでは CSS のスタイルの切り替えと JavaScript の動作の切り替えのタイミングが一致しません。何故かというと $(window).width() はスクロールバーの幅を減じた値になっているからです。更にいうとスクロールバーの幅はブラウザによって異なるのでどれぐらいの差がでるかはブラウザによって異なってしまいます。さてどうしたものでしょうか？ 解決策 解決策として 2つ見つけました。一つ目は以下のように matchMedia を使う方法です。
Viewport と Media Queries に関するメモ | Web Design Leaves
Viewport の指定 スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。 Viewport ブラウザの表示領域のことで、デバイスごとに異なる。（デバイス幅や解像度とは別）「Viewport」にはブラウザの表示領域をピクセル単位（何px X 何px）での値が設定されている。 デバイスの解像度（device-width や device-height） デバイスの解像度は、デバイスピクセル比を持つスマートフォンなどではデバイスピクセル比から求められた解像度の値を指す。これは「デバイスの画面解像度 ÷ デバイスピクセル比」で求められる。 画面解像度が 320px X 480px、デバイスピクセル比「１」の iPhone 3GS では 320px X 480px。 画面解像度が 6
Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width
Updated: May 07, 2015 There are some great options for managing Javascript when using CSS media queries in a responsive website. MediaCheck, jRespond, and Breakpoints.js all allow you to fire javascript functions based on customizable breakpoints in browser width. However, recently I was working on a small site with only a single function to be called at a smaller browser size, in conjunction with
いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ
HTML5のマークアップ仕様で追加された「カスタムデータ属性」。でも何のためにあるのか、どう使うのか、説明できますか？ この記事ではHTML5カスタムデータ属性の使い方を説明します。また、Web開発者の仕事に役立つユースケースも紹介します。 なぜカスタムデータ属性か？ 多くの場合、DOM要素が異なれば、それに応じた情報を格納する必要がでてきます。そういった情報は読者にとっては不必要かもしれませんが、開発者にとっては簡単にアクセスできれば仕事がずっと楽になります。 たとえば、Webページにいろいろなレストランを載せたリストがあるとします。レストランで出される食事のタイプやレストランまでの距離についての情報を格納する場合、HTML5が登場する前は、 HTMLのclass属性を使っていたと思います。もし、ユーザーが特定のレストランについて知るために、レストランのidも格納する必要が出てきたらどう
【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】
HTML／CSSの勉強においては、この1冊で十分です。HTMLとCSSのうしろに数字（5と3）がついていますが、これはバージョンを表しているだけで、これから勉強を始める方はとくに気にしなくて大丈夫です。 本書を使うにあたっての注意点としては、多分途中で飽きるということです。これは人にもよりますが、ぼくの場合は途中で飽きました。飽きないようにするコツとしては、ゆるく読むことが大切です笑。HTML／CSSは基礎だけど幅が広いです。なので、1度で理解しようとすると時間がかかりすぎて飽きる原因になります。 1-3. ディベロッパーツールの使い方 ドットインストールとよくわかるHTML5+CSS3の教科書を読み終えた時点で、HTML／CSSはこんなもんか、くらいは理解できている状態かと思います。このタイミングでディベロッパーツールの使い方を理解しておくことが大切です。ぼくが独学で勉強していたときは結
HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。 すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2
HTML 5.1
HTML 5.1はHTML5の最初のマイナーバージョンアップであり、Webアプリ開発に役立つさまざまな機能が追加されている。 連載目次 HTML 5.1とは HTML 5.1*1は2016年11月1日にW3Cによって勧告されたHTMLの言語仕様。 現在ではHTMLの言語仕様自体はWHATWGとW3Cによって策定が進められているが、前者はWebの進化を推進するためのもの（HTML Living Standard）、後者は「HTML Living Standard」を基にW3Cの仕様策定プロセスにのっとった言語仕様の安定的なスナップショットとなる点が異なる*2。最新のWeb標準をフォローするには前者をチェックするのがよい。 HTML 5.1で仕様に追加された機能としては、以下のようなものがある（抜粋）。 <picture>要素、srcset属性： デバイスの画面特性に応じて表示する画像ファイル
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
初めてHTMLドキュメントを書く人が「これだけは押さえておきたい」ポイント
※本稿は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター（2015年6月27日発行）』の中から、特に＠IT読者に有用だと考えられる箇所を編集部が選び、著者及び出版社の許可を得て転載したものです。 ご注意：本稿は、タイトルを除き、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは＠ITのそれとは一致しません。あらかじめご了承ください。 Webページは、HTMLドキュメントのデータをWebブラウザーが読み込み、これを解析することで画面上に表示されます。そういうわけで、何はともあれWebページを表示するためには、HTMLドキュメントを作らなければなりません。 このセクションでは、HTMLドキュメントの基本的な構造と、ドキュメントの内部に記述するHTMLの要素について見ていきます。 Point HTMLドキュメントの中身を知って
HTMLの特殊文字 ： IT用語辞典
▼ ご意見やご指摘、追加希望用語などはこちらからお送りください (個別にお返事はできかねますのであらかじめご了承ください) 当サイト「IT用語辞典 e-Wordsイーワーズ」はIT（Information Technology：情報技術）用語のオンライン辞典です。コンピュータ・情報・通信などを中心とする各分野の用語について、キーワード検索や五十音索引から調べることができます。用語の意味や定義、概要や要約、略語や別表記、英語表記や綴り、フルスペル、読み方や発音、仕組みや役割、歴史や由来、語源、構造や構成、要素、特徴、機能や性能、諸元、規格や仕様、標準、原因や要因、手法や方法、方式、種類や分類、利点やメリット、欠点やデメリット、問題点、対義語や類義語との違い、用例や事例、具体例、画像や図表、関連用語、外部資料や別の辞典による解説へのリンクなどを掲載しています。 当サイトは株式会社インセプトが制
Lore's Source to HTML Converter - Index
Lore's Source to HTML Converter is a free software tool that converts source code of arbitrary programming or markup languages into syntax-highlighted HTML. The key features are: Supports arbitrary programming or markup languages. Actually language definitions for C/C++, Java, Java Script, Delphi, LaTex, HTML, Ini files and BibTex exist. Project files to easily store options and file lists for you
Web 関連仕様 日本語訳
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
VimにEmmet導入して爆速HTMLコーディング - Qiita
タイトル盛りすぎました。すいません;-P emmetってなに？ HTMLやCSSの入力を効率化してくれるお便利ツール。 似たようなものだとhamlがあります。 hamlはシェルでコマンド叩いてHTMLを生成するのに対して emmetはエディタ上でショートカット打てば自動でHTML展開する。 個人的にはemmetのほうが便利 Zen-Codingの改良版という位置づけらしいです。 詳細はこちらEmmet 対応するエディタは？ [公式] Sublime Text Eclipse/Aptana TextMate Coda NetBeans [サードパーティ] Vim WebStorm PhpStorm 他いろいろと。 具体的に何ができるの？ 例えばこんなことを書いてショートカットキーを押すと <table> <tr class="row"> <td class="col1"></td> <td
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Liveweave HTMLエディター
Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia JS Animate CSS Apex Charts JS BBulma C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Div Table Generator
Flexible Boxes