2025年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近の出来事を取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial, "Hir
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス？かっこ良さ？奇麗さ？良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって？ 最良の方法？ 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
Webサイト設計図 - ワイヤーフレームの作り方
Webサイト設計図 - ワイヤーフレームの作り方WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。 実践で学ぶ Web サイト制作ガイド：その 3目標：わかりやすいワイヤーフレームを作成することができる必要なもの：紙とペン対象レベル：超初心者 OK！目次誰のため？何のため？Web サイトを作り始める前に。Web サイトの構成図を簡単に作れる便利ツールWeb サイト設計図 - ワイヤーフレームの作り方 ← 今ここPhotoshop で Web サイトのデザインをしようP
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
Adobe XD, Photoshop, Illustratorの注目情報が満載！Adobe MAX Japan 2017 フォローアップのまとめ
Webデザイナー、Web制作者、イラストレーターなど、Adobeのアプリを使用している人は必見です。先日開催されたAdobe MAX Japan 2017のフォローアップをまとめました。 Adobe XD, Photoshop, Illustrator, Dreamweaverなどの新機能を中心にくわしく使い方が解説されています。日常的に使用している人でも、意外と知らない機能に目から鱗かもしれません。 Select Subject in Photoshop CC なんと1クリックで、複雑な選択範囲が作成できます！ 1:03あたりから、人物を1クリックするだけで一瞬で選択範囲が作成されています。 Photoshopの次のアップデートで搭載予定の新機能で、Adobe Senseiの人工知能を使い、画像の主題を自動認識して選択範囲を作成します。「Select Subject」という名で、動画を見
伝言ゲームをなくしてデザインの質を高める！Adobe XDを使ったライブデザインのコツ
243 Screens, Last modified on Nov 27, 2017 12:42 GMT
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック
デモページ（コンテンツ量が多い時） 実装 HTML 最小限の構成はこんな感じです。 コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。 <body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body> CSS デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。 // STYLES - essential for sticky footer html { min-height: 100%; position: relative; } body { margin-bottom: 5em; } footer { bottom: 0; height: 5em; position: absolute; }
![[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e55a7967f77bbcc88ed8e9e24c73a34c021f77e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051101.png)
Flexboxベースの軽量レスポンシブCSSフレームワークBasisをつくりました。
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
AMP対応 2016.02版 - YAMAGUCHI::weblog
はじめに こんにちは、Go界のエルゴノミクスキーボードです。今日Googleがモバイル検索で Accelerated Mobile Pages に対応したというアナウンスがありました。 Google Japan Blog: モバイルウェブをもっと速く また中の人が仕組みや導入手順を書いてくれたようです。やさしい！！ Google モバイル検索が Accelerated Mobile Pages に対応しました - Google Developers Japan しかしながら、私も今回のGoogleのAMP対応に関して、なぜかいろいろと知見が溜まったような気もするので、忘れないうちにこの場に書いておこうと思います。これはあくまでも私個人の意見であって、ここのコメントになにか書かれても一切お答えしないことを先に書いておきます。なお2016.02版としているのは、これからもいろいろと追加されたり
書籍『Webプロジェクトマネジメント標準』を全文PDF無償公開 | News&Column | 株式会社ロフトワーク
書籍『Webプロジェクトマネジメント標準』を全文PDF無償公開 ロフトワークは、書籍『Webプロジェクトマネジメント標準』全文をPDFデータで無償公開します。 ロフトワークは、2002年という早い段階からWebとクリエイティブの領域に世界標準のプロジェクトマネジメントの知識体系「PMBOK（ピンボック）」を導入し、Webプロジェクトのフレームワーク確立やリスクの軽減などに努めてきました。その過程で得た知識や経験を体系化、Webの制作現場につながるように編綴し、2008年に技術評論社より書籍『Webプロジェクトマネジメント標準』（共著=林千晶・ロフトワーク代表取締役、高橋宏祐・富士通グループWebサイト統括（*1））を出版しました。 『Webプロジェクトマネジメント標準』は、プロジェクトの課題が個人の能力・努力の問題であると苦しんでいる方々にこそ読んでいただき、制作側・クライアント側の双方が
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
学ぶ、考える、書き出す。
2023年1月1日 2022年の振り返り 今年は良くも悪くも某国際球技イベントに振り回された年だった。 2022年11月23日 eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。 2022年8月24日 Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する 当ブログのシステム構成について紹介します。構成を真似することでほぼ無料（後述）でブログ
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome DevTools に描画フレーム毎のスクリーンショットを記録/再生する機能がついています - latest log
CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
