令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
ユーザーインタフェースにおける視覚効果 - Frasco
われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 １．整然としたビジュアルサイズ どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
