ar0のブックマーク - はてなブックマーク

レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所

レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと

ar0 2022/09/06

リンク

JavaScriptでクリップボードにコピーするボタンを設置する方法

JavaScriptでクリップボードにデータをコピーしたい場合、clipboard.jsを使用すると簡単に実装することができます。clipboard.jsはMIT Licenseのオープンソース・ソフトウェアで、実装している機能をサポートしているブラウザはChrome 42以上、Firefox 41以上、IE9以上、Opera29以上です。Safari9.1はサポートしていません。 clipboard.jsを読み込む clipboard.jsを使用するためには、script文で以下のファイルを読み込むことで使用することができます。 https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js または、以下のURLからライブラリをダウンロードし、distディレクトリ内のコードを読み込んでも使用することがで

ar0 2022/07/01

リンク

Webページの表現を広げてくれる日本語のWebフォント10選 | UX MILK

この記事では、日本語が使用できるWebフォントを10個厳選して紹介しています。有料・無料のどちらも紹介しています。英語のWebフォントと比較して、日本語のものは文字数の多さからまだまだ使用に課題が残りますが、サブセット化等をしてWebページの表現を広げることが可能です。無料のWebフォント ※すぐに利用できるWebフォントにはHTML・CSS内で使用するコードも一緒に記載しています。１. Noto Sans JP CSS内、@importで読み込む場合

ar0 2021/12/20

フォント

リンク

jQueryで親要素を取得する：parent(), parents(), closest()

今回は、jQueryで親要素を取得する方法を説明します。紹介するメソッドは「parent()」「parents()」「closest()」の3つです。親要素を取得するparent() 親要素を取得する最もシンプルな方法は「parent()」メソッドを使用することです。（例１）#targetの親要素#parentを取得する HTML

ar0 2021/08/12

jquery

リンク

Webデザインのスタイルガイドの作り方

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で