ESE Agency — Site of the Day - 7.32 — May 10, 2024 —

Design trends have to be used cautiously. Just as quickly as many trends come into fashion; they can fall out of favor and make a design feel dated. Don’t ignore them completely — testing out trends can stretch your creative muscles and help you create something you might not have tried otherwise. But do be aware of what’s fresh, what’s timeless, and what’s out of date! Here are 10 design trends t

Document Object ModelDocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheets (en-US)alinkColor 非推奨 all 非推奨 anchors 非推奨 applets 非推奨 bgColor 非推奨 bodycharacterSetchildElementCountchildren (en-US)compatModecontentTypecookie currentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨 embedsfeaturePolicy Experimental fgColor 非推奨 firstElementChild (en-US)fontsformsfragme

ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。 Fixed Headers, On-Page Links, and Overlapping Content, Oh My! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ内リンクが固定ヘッダと重なって隠れる scroll-paddingとscroll-margin 「scroll-snapプロパティ」のサポートブ

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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

固定のヘッダーがアンカー先コンテンツを隠してしまう、これはしばしば問題になることがあります。 この問題にはいくつかの解決策があるので、ここでは5つの解決策を紹介します。実装サイトの参考としてリンクも記載しておきますが、記事を書いた当時のものなので現在の実装とは異なる可能性があることにご注意ください。 1. JavaScript JavaScriptでの実装は説明が不要なのでここでは省略します。画像の高さだったり、考えることもあるのであえてこの方法を使うメリットが思いつかないのであれば、この方法で実装する必要はないはずです。 2. 空の Element を利用する 実際のリンク先にIDを付与するのではなく空の別の要素を置いておいて、それを絶対配置で飛ばしておく方法になります。

単純なシェイプの組み合わせから複雑なシェイプを作成することができます。そのためには、組み合わせたいシェイプを選択し、プロパティインスペクター内の次のいずれかのオプションをクリックします。 結合：背面と前面のオブジェクトのエリアを結合します型抜き：背面オブジェクトのエリアから前面のエリアを型抜きします交差：前面オブジェクトのエリアと重なる背面のエリアをクリップします中マド：背面と前面のオブジェクトのエリアを結合し、背面と前面の重なるエリアを穴あきにします シェイプをマスクとして使用することもできます。画像の一部の表示、画像のぼかし、不透明度の変更などに利用できます。詳しくはシェイプでマスクを作成をご覧ください。

技術書典5 で本記事をさらにパワーアップさせた本を書いたのでよかったらどうぞ Chromeデベロッパーツールを使いこなそう Console編 Chrome デベロッパーツールの Console には Web 画面を解析するための便利な機能が備わっています。 この便利機能を覚えておくと Web 画面からの情報抽出 や、 Chrome Extension 開発 がとても捗ります。 ※ 筆者はこの機能を利用して、 ウェブスクレイピング時のDOMセレクタを調べたり、 Q Accelerator などの Chrome 拡張機能を開発しています。 本記事では、次の３つを解説します。 1. Console の便利機能 2. 実際に Qiita の画面を解析する手順 3. リアルタイムで評価結果を返す Eager Evaluation （Google IO 2018 で発表されました） 便利機能（コマンド

今回のお題「ステップインジケータ」 今回はネットショッピングでの商品注文や会員登録などでもよく見られ、今の進捗状況と後どれくらいで目的が完了するかを可視化するために用いられる「ステップインジケータ」を題材に、UIデザインのお話をしていきます。 ■本記事の登場人物

「かっこいいウェブサイト」とはどのようなものでしょう？　ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな

作成：2016/09/12 Web制作 > スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。 エンジニア速報は Twitter の@commteで配信しています。 インジケーター 進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。 ヘッダー どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。 See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen. CSS only s

突然ですが、あなたは今、居酒屋にいるとします。 「15分前に注文した生ビールがまだ運ばれてこない状況」を想像してみてください。 あなたはどのような気持ちになりますか？ もう一度店員に声をかけようとするでしょうか。 それとも、諦めてお勘定を済ませようとするでしょうか。 いずれにしても、楽しくビールを呑むはずの時間を、不快感や残念な気持ちを抱きながら過ごすことになるでしょう。 お店側から「もう少々お待ちください」という一声があれば良いのに… そうは思いませんか？ 同じようなことが、アプリを利用している最中にも起こりうるのです。 1つのボタンを押しても反応がない時や、ページが推移した後に何も表示されない時、ユーザーはアプリから離脱しようと考えるでしょう。 この離脱を避けるためには、アプリがユーザーに対して「プロセスを実行している」ことを視覚的に伝えられなくてはなりません。 この記事では、その役割