CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
プログラムによるレイアウト制御のための CSS Grid を考える
この記事は、既存のCSSのレイアウトの文脈ではなく、「プログラムから制御されるレイアウト」をいかに綺麗に制御・生成するか、です。 複雑なSPAや何らかのオーサリング環境で、主に JavaScript の視点からレイアウトを扱うのに Grid をどう活かしていくか、という話。 grid-template-areas の視覚的な対応 IEがない世界では CSS grid のフル機能を使うことができます。 自分が grid を使う際、今まで grid-template-areas を気に入って使っていました。これは CSS の視覚的な情報が最終的な表示と一致する、という理由からです。 例えば、 svelte で書いた grid-template-areas を使ったレイアウト設定のコードはこんな感じになります。。 <div class="grid"> <div style="grid-area:
このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ
この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ CSSコピペで完成！押したくなるWebボタンデザインまとめ Webデザインの引き出しを増やす、コピペできる最新HTMl／CSSスニペットまとめ 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 画
`<meta charset="UTF-8">` を書く必要性があるケースとデメリット
HTML 文書内に <meta charset="UTF-8"> を書いていますか? 書いているとしたら、その必要性を問われた時に理由を説明できますか? 実は私も勘違いしていた部分があり[1]、改めてまとめてみました。 まず基本的なおさらいをします。<meta charset="UTF-8"> は HTML5 で登場した新しい記法で、 HTML4 以前は <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> などという長くて覚えにくい書き方をしていました。さらに遡ると、黎明期の HTML には meta 要素そのものが存在しません。 HTML が考案された当初、 meta 要素はありませんでした。 home of the first website(info.cern.ch) 世界最初の Web ページ。ソー
HTML：viewport の正しい書き方 | WWWクリエイターズ
何が正しいのか、よくわからない・・、となりがちな、HTMLのおけるviewport の書き方についてです。 viewport はこう書くのが正解 先にまず結論から。viewportはこのように書くのが正解です。当然ですが、HEADタグの中に記載してくださいね。 <meta name="viewport" content="width=device-width"> ただし、これはページを「レスポンシブ」に設計した場合に限ります。 モバイル端末への対応を行わず、PCレイアウトのみで表示させたい場合は、この限りではありません。（詳しくは後述） モバイル端末ブラウザーで、タップの反応速度が早くなる！ 上記のviewport指定方法「width=device-width 」に関する、意外で最も重要なポイントは、モバイル端末では、この記述によってタップの応答が早くなるという点です。 Googleの文献
コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
上記のように指定すると、横幅360pxの仮想領域としてViewportが作られます。 ブラウザはこのViewportの幅をもとにレンダリングを行うので、メディアクエリでも360pxとして反応し、DOM操作でclientWidthを取得しても360pxとなります。 モバイル端末の幅よりもViewportの幅のほうが小さいか同じであれば、スマートフォンサイトとしてストレスなく閲覧することができるでしょう。 以下のように指定すると、Viewportの幅は実際の解像度ではなく端末やブラウザに合わせた値を返します。 Viewportで指定できるもの 1. width (横幅) Viewportの横幅をピクセル単位で指定します。意外と知られていませんが、初期値は960pxです。 また、指定できる範囲は200px〜10000pxで、そのほかにデバイス幅に合わせるdevice-widthがあります。 2.
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
【JavaScript】現在時刻をリアルタイムで表示し続ける方法 - Qiita
プログラミング勉強日記 2021年1月9日 以前、こちらの記事でJavaScriptでの日付と時刻を取得する方法をまとめた。今回は、現在時刻をリアルタイムで表示し続ける方法を紹介する。 現在時刻を格納するDateオブジェクトを作成する 作成したDateオブジェクトから時間・分数・秒数を取り出す 時計として表示する文字列を作成する 文字列を時間に書きかえる 1秒ごとに特定の処理を実行する 1. 現在時刻を格納するDateオブジェクトを作成する方法 以下のようにnew Date()で現在の日付・時刻する。
WEBブログ | 今日の日付と現在時刻を取得し表示する | RunLand(ランランド)株式会社
全国対応！外注・下請けのホームページ制作会社をお探しの会社様。 人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】
基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】 初心者向けにHTMLにCSSを適用させる方法について解説しています。Webサイトを作っていく上でHTMLとCSSは必ず使います。その中でCSSを扱う方法について詳しく説明しているので、ぜひ使えるようにしておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】
初心者向けに、HTMLで「linkタグ」と「scriptタグ」を使ってファイルを読み込む方法を解説した記事です。html・css・JavaScriptは別ファイルに分けて作るのが一般的。そのファイルを読み込むために使用します。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解
HTML文書にCSSを適用する－CSSの基本
■HTML文書にCSSを適用する CSSでHTML文書やXHTML文書にスタイルシートを適用するには、大きく分けて以下の3つの方法があります。 <link>要素で外部CSSファイルを呼び出して適用する <style>要素で文書単位に適用する 要素にstyle属性を追加して局所的に適用する <link>要素で外部CSSファイルを呼び出して適用する スタイルシートを記述したCSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。 呼び出しには、HTML文書の<head>要素内に<link>要素を記述して、外部CSSファイルを指定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために、<link>要素のtype属性の値にはtext/cssを指定します。 XHTMLとの互換性やスタイルの修正のしやすさなどを考慮すると、この方法でスタイル
iframeのセキュリティを高めるsandboxの設定 | Free Style
HTML5から導入されたiframe要素のsandbox属性。 Webページに外部のHTML文書を埋め込むことができるiframe要素において、セキュリティを高めるために利用できる設定です。 埋め込まれる側のWebサイトでは、HTTPヘッダーに「X-Frame-Options: DENY」を追加することで、iframeやobjectの中に表示することを拒否し、セキュリティを保つことができます。 しかし、Webページを別のWerbサイトに埋め込んでうまく活用する場合もあります。 そういう時に使えるのがsandbox属性です。 sandboxとは sandbox（サンドボックス）の由来は「砂場」からきており、保護された領域を作り出すものです。 sandboxという環境で埋め込んだiframe内のコンテンツにある、外部のプログラムを保護された領域で動作させることによって、悪意のあるプログラムが実
【HTML】iframeのsandbox属性について - Qiita
#プログラミング勉強日記 2021年2月3日 昨日の記事でiframeの使い方についてまとめた。しかし、iframeで外部のWebページを埋め込むにはセキュリティ面でリスクがある。セキュリティを高めるために利用できる設定であるsandbox属性についてまとめる。 #sandboxとは サンドボックスは直訳すると「砂場」で、砂場で遊んでいる子供が安全であるようにサンドボックスはコンピュータの中で構築された安全な仮想環境のことでる。他と切り離されて、問題が起きてもその外側には影響が出ないようになっている。つまり、サンドボックスは攻撃されることを前提とした仮想環境であり、コンピュータをマルウェアから感染を防ぐ安全である仕組みのことである。 #sandbox属性でサンドボックス化する iframeではsandbox属性を指定することで、埋め込みコンテンツができることに制限をかける。 <!-- すべ
【VSCode】言語別、おすすめ拡張機能１９選！拡張機能でストレスフリーなエディターを作ろう！
VScodeは今のままでも十分使いやすいですが、拡張機能を入れると更に使いやすくなります。言語別にご紹介しますので、気になる拡張機能があったら入れてみてくださいね！拡張機能の追加は、サイドバーに「EXTENSIONS」（左のアイコンの一番下）を表示させて検索してください。有効、推奨、無効になっている拡張機能も見れるので、定期的に整理しましょう。 基本設定・ビジュアル変更の拡張機能 HTMLの拡張機能 CSSの拡張機能 JavaScripの拡張機能 WordPressの拡張機能 （おまけ）ライティング・TODOリストの拡張機能 基本設定・ビジュアル変更の拡張機能 VSCodeの基本設定やビジュアルを変更する拡張機能をご紹介します。ちょっとした事ですが、見た目が変わるだけで作業のしやすさが変わります。拡張機能を使わないでテーマを変更したいだけでしたら、パレットコマンド（Mac : Cmd +
Visual Studio Code でフロントエンドの開発環境を構築してデバッグする - Qiita
Webフロントエンドの開発を行ったことがない人向けに、Visual Studio Code でフロントエンドの開発環境構築からデバッグまでを説明します。 また、Google Chrome の デベロッパー ツール(Chrome DevTools) の使い方についても一部のパネルの説明をします。 開発環境の準備 フロントエンド開発で必要な開発環境の準備を行います。 使用するOSは Windows でも Mac でも構いません。 開発ツールのインストール フロントエンド開発なので、Webブラウザが必要となり、この記事では Google Chrome を使って説明します。 また、ファイルを記述するためのテキストエディタが必要となり、この記事では Visual Studio Code を使って説明します。 ソフト名 用途 バージョン ※
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Living Standard ｜ HTML要素チートシート
HTMLで良く使われる特殊文字(&～) |