HTML / CSS / JavaScript 制作 Tips 番外編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編・上級編として次の３０項目を教えていただきました。 初級編のTips 10個： HTMLタグは必ず閉じるように心掛けてや。メンドクサイけんど、閉じ忘れが原因でエラー起こることもあるんじゃ。 CSSは外部ファイルで管理する方が整理整頓やし、保守や改修も楽よ。ほなら、あんたのコードもすっきりと！ やはよう使うけど、セマンティックなタグを使うとSEOにも好影響よ。シンプルでも、意味をもったタグがあるけん、活用しとき。 CSSのセレクタ優先度を理解しとき。この順なら、「ID」「クラス」「タグ」よ。覚えておき。 JavaScriptでDOM要素を扱うときは、getElementByIdやquerySelector
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 中級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編について教えてくださり、ありがとうございました。今日は中級編として、以下の10個の項目について詳しく教えてください。 レスポンシブデザインに対応するにはCSSのメディアクエリを使うとええよ。 モダンJavaScriptでは、アロー関数がよく使われるわ。覚えときなり。 CSSでflexboxやgridを使うと、レイアウト作成が手軽になるの。 画像やフォントはな
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 上級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編について教えていただき、ありがとうございました。今日は上級編として、次の１０項目について詳しく教えてください。 パフォーマンス最適化のために、クリティカルCSSの使用や画像の遅延読み込みを検討しとき。 JavaScriptを使ってデバッグ作業を効率化する方法を覚えるのがええし。コンソールAPIとかね。 RESTやGraphQLによるAPIの設計と使用
フルブリードレイアウトとは最近のWebサイトのUIでもよく見かける、記事は中央配置に、画像や動画などは幅いっぱいに表示されるレイアウトのことです。これまではCSS Gridなどで実装されていたと思いますが、今回紹介するのはモダンCSSで実装できるテクニック。 CSSはわずか4行ですが、モダンCSSのテクニックがたくさん詰まっており、フルブリードレイアウトはさまざまなカスタマイズにも対応しています。 Full-Bleed Layout with Modern CSS by Temani Afif 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フルブリードレイアウトを実装するCSS html要素をコンテナにする理由 margin-inlineで何をしていますか？ CSSの別の書き方 全幅のコンテンツを同じ幅に制限する 終
2月10日、Bramusが「CSS Custom Functions are coming … and they are going to be a game changer!」と題した記事を公開した。この記事では、新たに導入されるCSSカスタム関数（CSS Functions）とそれがもたらす可能性について詳しく紹介されている。 以下に、その内容を紹介する。 本記事は、以下のエキスパートに監修していただきました: 現在Chromeは、このCSSカスタム関数をプロトタイピングしている段階である。まだ正式に使用できるわけではないが、Chrome Canaryで「Experimental Web Platform Features」のフラグを有効にすることで試験的に触ってみることは可能だ。 Chromeが取り組んでいるのは、css-mixins-1仕様にあるCSSファンクションに関する部分であ
※本ページは、アフィリエイト広告を利用しています。 HTMLとCSSを学ぶ近道は、手を動かすこと。本当なら制作会社で経験を積まないと身につけられないコーディングのスキルを独学で学べる解説書を紹介します。 本書は実案件をもとに作成された練習サイトを実装しながら、本格的にHTMLとCSSを学ぶことができます。デザインカンプや仕様も用意されており、かなり実践的に学べます。 本書は、HTMLやCSSのスキルを身につけるための学習サイトCodejumpの運営者である小豆沢氏による初の書籍。経験することでしか身につけられない実制作のスキルを独学でしっかり学べます。 B5判で普通の解説書とサイズは同じですが、すごいのは576ページと大ボリューム。さらにFigma, Adobe XDのデザインデータ、実装に使用する画像、HTMLやCSSのソースコードもサポートサイトからダウンロードでき、至れり尽くせりです
CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。 このattr()関数がよりパワーアップします。 これまではcontentプロパティだけでしたが、任意のプロパティで使用できるようになり、<string>以外のデータ型も使用できるようになります。 HTMLに記述したカラー値やidの値をCSSで使用することもできます。これでまた一つ、JavaScriptでしかできなかったことができるようになります。 CSS attr() gets an upgrade by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめ
インクリメンタルビルドは最大100倍以上高速化しており、場合によってはマイクロ秒単位で完了するという。ビルドを繰り返す開発プロセスにおいて、この恩恵は非常に大きい。 モダンWeb向けの設計 Tailwind CSS v4.0では、@layerや@property、color-mix()といった最新のCSS機能を積極的に活用している。 以下が新たに導入されたCSS機能の例である。 ネイティブなcascade layers — スタイルルールの優先度を柔軟に制御可能 登録済みカスタムプロパティ — 大規模ページでもパフォーマンスを向上しつつ、アニメーションなども実現 color-mix() — CSS変数やcurrentColorを含め、あらゆる色に対して不透明度を調整 以下にコメントを挿入したコードを示す。Tailwind CSS特有の機能や、CSSの最新仕様である@propertyルールの
しかし、sample-class-aのスタイルが反映されませんでした。 existing-classのスタイルは反映されているのになぜだろう...🤔 2. Assetのcompile 調べてみたところ、どうやらAssetがcompileされていないことが原因で、この問題を引き起こしていたようです。 2-1. Assetとは プログラムを動かすための部品のこと。 アセットには、スマートキャンペーン、メール、リスト、ランディングページ、フォームなどがある。 Assetについてはこちらの記事を参考にしました。 2-2. compileとは プログラミング言語で記述されたプログラムのソースコードをコンピューターで実行可能な形式に変換すること。 compileについてはこちらの記事を参考にしました。 2-3. Assetがcompileされていないとどのような問題が起こるのか 2-3-1. CSS
※本ページは、アフィリエイト広告を利用しています。 本書の改訂版がでるのを待っていた人も多いと思います。私もその一人です。 前書から2年が経ち、その間にも多くのHTMLの要素やCSSのプロパティが増え、この改訂4版では100種類以上の項目が追加されています。 本書はHTMLとCSSのリファレンス本としてだけでなく、補足情報やテクニックの解説もかなり充実しており、Web制作者なら必ず持っておきたい一冊です。手元にあるリファレンス本が古いなと思った人には、特にお勧めします。 HTMLとCSSが好きな人なら本書でご飯3杯は軽くいけます！！ 本書は2015年に刊行されて以来、ベストセラーを続けている「HTML＆CSS全事典」の最新版、改訂4版です。2024年11月現在の仕様にあわせて全面改定されており、HTMLとCSSのリファレンスだけでなく、新機能の解説、今時の記述方法、@ルールのさまざまな使い
Level Up Your CSS Game with @layers 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 画像編集やデザインの技術を次のステージに進めたいですか？CSS @layersは、よりクリーンで、整理された、効率的なスタイルを実現する強力な新機能です。熟練の開発者であれ、初心者であれ、このガイドでは@layersの謎を解き明かし、この革新的な技術を習得するための実践的な洞察を提供します。 CSS @layersの力を解き放つ: コアコンセプトと利点を理解する 従来の手法を超えて なぜ@layersを採用するのか？ @layersの実践: スタイルの整理と活用 @layersを始める 構造化されたスタイリング 可能性を最大限に引き出す 高度なテクニック: @layersでのレイアウト、スタッキング、パフォーマンスの習得
scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す 2025.01.18 scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。
MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール 2025.01.18 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。 View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。単一ページアプリケーション（SPA）においては document.startV
This Will Change in CSS in 2025: What You Need to Know 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2025年を目前に控え、カスケーディングスタイルシート(CSS)の世界はデジタル環境そのものと同じように、ダイナミックな変革を遂げています。 開発者やビジネスオーナーにとって、これらの変化に追従することは、イノベーションと効率性を推進する新しい機会を掴むことを意味します。CSSの標準からカッティングエッジな機能の統合まで、CSSの進化は絶え間ない発展の過程にあります。 これらの変化があなたとあなたのビジネスにとって何を意味するのか、詳しく見ていきましょう。🚀 CSS-Nextイニシアチブについて CSS3からCSS6への進化 これらの変更があなたのビジネスにとって重要な理由 202
Defending Against CSS-Based Attacks: Best Practices for Web Security 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 現代のウェブセキュリティ環境において、CSSやJavaScriptなどのフロントエンド開発技術は、インタラクティブなユーザーエクスペリエンスを作成するための強力なツールです。しかし、これらの同じ技術が悪意のある行為者によって意図しない目的で悪用される可能性があります。比較的知られていないデータ搾取の方法の1つに、CSSを使用してキーストロークやユーザー入力などの機密情報を盗む方法があります。この形態の攻撃は、JavaScriptベースの攻撃よりも実行が困難ですが、JavaScriptが制限されているか無効化されている場合に特に危険です。このチュートリアルで
こんにちは、10X プロダクトデザイナーの日比谷（@suuminbot）です。 現在10Xでは新規プロダクトを複数開発している真っ只中ですが、私もその一環でshadcn/uiとTailwind CSSを活用しつつ、SaaSのサービス画面（管理画面）用のコンポーネントライブラリをゼロから構築していました。 少し前に一通り最低限必要なコンポーネントをFigma・実装ともに作りきり、現在は実際にそのコンポーネントライブラリを使って自分自身が複数のプロダクトのUIを作ったり、開発が進んでいる様子を見ているところです。 このブログでは、今回取り組んだことや学びをご紹介していこうと思います。 新規構築の経緯 外部コンポーネントライブラリのあるある課題 自分たちのプロダクトに合った形のコンポーネントライブラリを、クイックに立ち上げたい 「クイックな立ち上げ」と「こだわり」を両立できるshadcn/ui
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
