令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
HTMLとCSSの疑問が一気に解ける！ 真剣に学びたい人にお勧めの解説書 -プロを目指す人のためのHTML＆CSSの教科書
最新のHTML Living Standardの仕様に準拠したHTMLとCSSの基礎知識を身につけ、なぜそこにそのHTMLを、そのCSSを使用するのかまで実践的な知識までしっかりと学べる解説書を紹介します。 HTMLとCSSへの理解を深めたい人、最新の仕様をきちんと理解しておきたい人、プロとしてWeb制作に関わる人が知識をブラッシュアップする際にもお勧めです。 本書はWeb制作、特にHTMLとCSSに関する書籍なら購入して間違いなしの大藤 幹氏の最新刊、すべてのページに学びがあります。 HTMLとCSSを真剣に学びたい人向けの解説書で、HTML Living Standardに準拠したHTMLとCSSの基礎から実践的な知識までしっかり学べます。
CSSで期待通りに表示されない根本的な原因の見つけ方
CSSで、期待通りに表示されない、なんかずれてる、ブラウザによって表示が異なる、ということがありませんか？ CSSで期待通りに表示されない時に、根本的な原因を見つける方法を紹介します。 その原因がブラウザによるものなのか、CSSの仕様によるものなのか、どのように機能するか知ることで、問題の根本的な原因を見つけることができます。 Finding The Root Cause of a CSS Bug by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 注意: ここでの「バグ」はエラーだけではなく、想定外の挙動・振る舞いです。 はじめに CSSの基本的なバグ ドロップダウンメニューの配置 HTMLの置換要素 オーバーフロー要素とインラインブロック要素 インラインブロック兄弟間のスペース まとめ はじめに
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
CSSでレイアウトを調整する第1歩！divタグで箱を作り、floatで横に並べてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニア特化型Q&Aサイト「teratail」のDevRelを担当している、DevRelライターの木下です。非エンジニア目線で書くWebプログラミング超入門記事、連載5回目です。 さて、これまでの連載ではHTMLで自己紹介ページをつくり、それをブラウザに表示したり、CSSで装飾したり、CSSのファイルを書き出したりしてきました。今回は「<div>タグ」というものと、CSSの「float」という命令を使って、CSSでレイアウトを調整するための第1歩を踏み込もうと思います。 今回のゴール 完成図は上記です。アイコン画像の周りに「水色の箱」ができていて、隣には名前やニックネームが入った「緑の箱」ができていますね。今回はこのように要素をグループ化する「箱を作る」というのと、「その箱を隣同士に並べる」というのをやっていこうと思います。これをマスターすれば、CSSでできることがかなり増え
HTML5でつくる2カラムや3カラムレイアウトのはじめの一歩
Image by:Design Inspiration サイトやブログの運営を長くやっていると、オリジナルのデザインに挑戦してみたくなったり、ちょっとだけカスタマイズしたくなったりと、興味が湧いてきませんか？ ちょっとしたデザインやCSSを変更したいときに、サイトのレイアウト構成を理解していないと、せっかく調べた装飾系コーディングも、どこに記述していいのか分かりませんよね。 今回は、レイアウトの理解のはじめの一歩として、基礎の基礎という感じになりますが、サイトのレイアウトを支える土台部分をメモっていきたいと思います。 デモについて（HTMLとCSSの注意点） HTMLのデモと説明のコーディングは、ほぼ同じになります。 強いて言えば、各セクションの中身の表記が違うだけです。 CSSの説明は、本当に必要な部分だけ説明しています。 説明を省略している部分やデモと違いのある部分は、装飾系のコーディ
【全訳】JSだけじゃない！AirbnbのCSS/SCSSスタイルガイド - リクルート住まいカンパニー Tech Blog
こんにちは！2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
CSSに関する記事のまとめ 基礎から応用、CSS3まで
こんにちは、WEBマーケティング部の杉尾です。 この記事では、弊社のCSSに関する過去記事をまとめています。 用途に合わせて各記事をご覧いただきやすくしていますので、是非参考にしてください。 CSSの基礎 まずは、こちらでCSSを使うにあたっての基礎を押さえましょう。 ⇒【CSS】CSSとは？ カスケーディング・スタイル・シートって？ CSSの基礎知識を紹介します ⇒【CSS】CSSの書き方と外部スタイルシート設定方法を紹介します ⇒【CSS3】 ベンダープレフィックスとは？ （プロパティによっては不要） ⇒【CSS3】2015年4月3日現在 よく使うCSS3プロパティのブラウザ対応状況と書き方 ⇒【CSS】margin paddingの違いと使い方を紹介 CSSのセレクタについて CSSを使うに当たって、必ず習得しないといけないのが、セレクタです。 スタイル（装飾）を適用する対象を指定し
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
コーディングを考慮したWebデザインガイドライン
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
CSSの基本から理解を深め一つ上のスキルを身につける、他書とはひと味もふた味も異なるオススメの本 -CSS設計の教科書
その場限りのCSSを使うのではなく、CSSの基本からしっかりと理解を深め、運用期間が長くても安心して使えるCSS、大規模なサイトでも管理できるCSSを身につけたい人に役立つ一冊を紹介します。 単にコードを書くだけではなく、設計・管理・運用を考えた『ちゃんとしたCSS』が徹底的に解説された良書です。 GoogleエンジニアのPhilip Walton氏によると、より良いCSSのゴールとして次の4つのポイントが重要です。 予測しやすい 記述したスタイルが他のスタイルに影響されず、期待通りの見栄えになる。 再利用しやすい スタイルの定義が機能ごとに管理されており、似たUIの別のプロジェクトにも利用できる。 保守しやすい スタイルを追加・修正した際に、既存のものに影響を与えない。 拡張しやすい サイトの規模が大きく複雑になっても、対応できる。 参考：CSS Architecture（翻訳版） これ
CSSの設計 | 第1回 枠とモジュールで考える
CSSの設計 第1回 枠とモジュールで考える このシリーズでは、なるべくメンテナンスしやすい、可読性の高いCSSを設計する考え方を解説します。第1回目は、現状のCSSの問題点と、枠とモジュールで設計する考え方を紹介します。（監修：フロントエンド・エンジニア高津戸 壮） はじめに 初出 この文章は『CSS Nite LP, Disk 26「CSS Preprocessor Shootout」』で高津戸が行った講演「CSSの設計」を元に、テキストとして再構成しています。 CSSはとてもシンプル 今「CSSの設計」を改めて考えるのは、なぜでしょうか。CSSの基本はとてもシンプルです。例えば、次のようにHTMLにクラスを付け、そのクラスに対してのスタイル指定をCSSで行うだけです。 <div class="box"> hoge </div> .box { color: red; } HTMLの要素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法
