line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
媒体ごとのQRコードによる集客の計測 | 広告デザイン：エムズクラフト
QRコードパラメータを使った計測集客を考える際に計測したデータを次に生かすことが必要不可欠です。しかし、DMやチラシなどの紙媒体や、看板などオフラインメディアの計測は出来ないとお考えの方も多いのではないでしょうか。 ホームページにアクセスしてもらうのが目的のQRコードですが、QRコードで読み込むURLに計測用のパラメータをつけることで、グーグルアナリティクスの参照元で計測することが出来ます。 QRコード用のパラメータの条件を考えるGoogleアナリティクスで流入経路を判別するためには、URLの末尾にカスタムパラメータという文字列を追記します。 例として特定日時のダイレクトメールからのアクセスを計測する場合は、 ☆リンク先のURL ： https://mz-craft.net/ ※メディアにあわせた各ページURLでももちろんかまいません。 ☆計測したい施策：ダイレクトメールからのアクセスを計
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
Hexo製ブログを公開してGoogle検索できるようにする
手元で作成したHexo.js製ブログを、GitHub Pagesで公開して、Google検索できるようにするまでの手順を、この記事にまとめました。 GitHub Pagesでサイトを公開しようと考えている方の参考になれば幸いです。 はじめに前後編に分割した理由下記の二つの理由を持って、記事を前後編の二つの記事に分割することにしました。 PageSpeed Insights で、ページ内の DOM 要素数が 800 を超えていると、警告を受けたから。テンプレートやスタイルのリファクタを頑張ったが、800 を下回れなかった。技術的な内容にも関わらず、長すぎて可読性が落ちていると思ったから。いくつか記事を書いた結果、読了時間が 10 分程度だとバランスが良いという結論になった。この記事の存在意義読者様が、ブログ作成シリーズの記事をひと通り読んだ後に Hexo.js + GitHub Pages
黒い画面不要！デザイナ向け静的サイトジェネレーター「Phest」を公開しました | チャットワーククリエーターズブログ
こんにちは！ChatWork CTOの山本です。 ChatWork Advent Calendar3日目を担当します。 今回は、ChatWork社内でサイト制作に使っている、デザイナ向け静的サイトジェネレーター「Phest(フェスト)」というツールを公開します！ >>PhestのGitHubリポジトリはこちら 静的サイトジェネレーターって？静的サイトジェネレーターとは、テンプレートなどプログラム的な処理を実行し、 HTML/JavaScript/CSS/画像などだけで構成された静的なWebサイトとして書き出すツールのことです。 Webサイトをつくる上で共通のヘッダやフッタなどは、PHPやSSIなどのinclude構文を使ったり、 そもそもWordpressなどのBlogやCMSなどを使って構築するケースが多いと思います。 静的サイトジェネレーターは、そういったシステムが必要な部分をあらかじ
How To Center a Div
IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han
GASでSVGを使った座席管理アプリを作る｜officeの杜
使いドコロと使う理由使い所SVGで自由自在にレイアウトを構築することが出来、単純なHTMLとCSSよりも直感的にアプリケーションを使って構築が可能です。このSVG画像を使うことで フリーアドレス対応の座席管理アプリの構築 様々な予約管理システムの構築 センサーデータと連携して、作物の監視状況の可視化 グラフィカルなサイトマップの作成 などなど応用が可能です。通常の画像とライブラリで作るよりも遥かに手軽で、大きさがスケールし、JSで操作も出来、SVGであるためクリッカブルマップのような古い技術よりも手軽につくれます。 出勤したらクリックして席を確保するアプリ使う理由SVG画像はベクターグラフィックスとも呼ばれ、ウィンドウの大きさによって、その内容が自動的に劣化すること無くスケールする、中身はXMLで出来た特殊な画像形式です。 その構造であるため、HTMLの中に呼び出せれば、JavaScrip
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
レイアウトデザインの視点を増やす 思考＆Tips｜ハラヒロシ / デザインスタジオ・エル
はじめにこのnoteは、私がTwitterで発信した「デザインの思考＆Tips」のなかから、レイアウトデザインに関する内容を編集してまとめたものです。普段のデザイン業務で私が意識している、webデザインを中心としたレイアウトの考え方やTipsを紹介します。 「レイアウト」といっても、ただ単にドキュメント上に要素を置くのは誰でもできます。どんな素材にするか、どんな動線にするかを考えて位置を決めていくのが「デザイン・レイアウト」。こちらがデザイナーの仕事ですね。デザイナーは、達成したい目的のために秩序を与えつつ工夫していくことが求められます。 では、配置するにあたってどのようなことを意識したり注意すればよいでしょうか。 川の流れのようにレイアウトするにあたっては、情報の優先順位を決めてそれをボリュームで割り当てるのが基本です。ただし、これだけだと単に積み重ねているだけで流れが悪いので、視線が滑
データベース(Airtable)から、数分でWebサイトを立ち上げるならSoftr｜tsubasatwi(ツバサ）
こんにちは、NoCodeCampのツバサです。今回はブロックを並べるだけで、簡単にサイトを作れるWeb サイトビルダーSoftr の紹介をしていきます。 ノーコード全体のアプリケーションや、サービスサイトを知りたい人は、過去記事のNoCodeツールは、こうやって選ぶ！選び方とおすすめ学習コンテンツをご覧ください。 Softr って？どんなツール2020年8月25日にMVPがリリースされ、2021年の初めにWebアプリ構築プラットフォームとして正式リリースされました。2022年1月現在では、35,000を超える企業で使われていると公式で報告されてます。 Softrを使用すると、「会員制サイト」「マーケットプレイス」「ポートフォリオ」「営業CRM」「決済付コミュニティサイト」および簡易なWebサイトがブロックを並べるだけで、簡単につくることができます。2022年には、Softrは1350万ドル
ちょうどいいWebデザインギャラリー
カラー ネイビー (7) カラフル (259) スカイブルー (228) ホワイト (1226) ベージュ (423) グレー (434) ブルー (353) パープル (57) ピンク (126) レッド (212) オレンジ (124) イエロー (215) グリーン (310) ブラウン (148) ブラック (539) ゴールド (54) 業種 スポーツ (27) 旅行・ホテル・観光 (154) 美容 (112) エンタメ・趣味・娯楽 (177) 製品・工業・素材 (134) 金融・保険・会計・法律 (47) ファッション・アクセサリー (76) 就職・人材サービス (32) インフラ (26) 不動産・建築・空間・施設 (152) アート (41) 車・バイク他 (18) 事業・組織 (72) 暮らし商品・サービス (149) 飲食・食品・飲料 (481) 行政・NPO・団体・協
UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
デザイナー必見！アイデアがでないときに見たい海外のデザインサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのしーちゃんです。 突然ですが、デザイン時にアイデアが出なくなってしまったことはありませんか？ 私は何度もあります……。 そういうときの解決策は色々あると思いますが、私の場合はネットで色々検索して、他のデザイナーの方々のデザインを見ることで新たなアイデアのヒントを得ています！ まだ解決策が確立していなかったり、いつもの解決策を行ってもなかなかアイデアが降りてこないとき、この記事で紹介するサイトを見て着想を得ていただけると幸いです！ AIGA （Eye on Design） 画像引用元：AIGA AIGAはアメリカにある最も古く、最大のデザイン会員組織です。 Eye on Designブログには、デザインに関するいくつかのユニークなトピックがあって、教育やタイポグラフィの記事など、多種多様な記事が掲載されています。 また9つの主要なカテゴリに分類されていて、一気に色々な
翔泳社祭2022、Kindleセールが開催！ デザイン、Web制作、絵師さん向けのイラスト関連の良書がたくさん対象です
翔泳社祭2022のKindleセールで、Webや紙のデザイン、Web制作、同人誌・絵師さん向けのイラスト関連の良書がたくさん対象です！ セール期間は2022年2月24日（木）まで。 セール期間が非常に短いので、お見逃しないように！ セール初登場、あまりセール対象にならない本もあります。 【最大50%OFF】翔泳社祭2022(電子書籍セール) 約1450点対象 まずはセール初登場、2021年発売された中で個人的にベスト1の書籍！ HTML+CSSの解説書で、Flexboxをメインにした実装はもちろんのこと、知識やテクニックを身につけるためのさまざまな工夫とアイデアが凝らしてあり、初心者も中級者も、そして人に教える立場の人にもお勧めできる良書です。
Flex Messageの要素
# バブル バブルは、1つのメッセージバブルを構成するコンテナです。JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「バブル」を参照してください。 # カルーセル カルーセルは、1つ以上のバブルを要素に持つコンテナです。カルーセル内のバブルは、横にスクロールして閲覧できます。 上のFlex Messageを表現するには以下のようなJSONデータを指定します。JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「カルーセル」を参照してください。 { "type": "carousel", "contents": [ { "type": "bubble", "body": { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "Lo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VUEVO（ビューボ） | みんなの会話を視覚化し、聞こえの違いをつなぐサービス
Notion Icons 5.0
Kindle本の特大セールが開催！ UIデザイン、Web制作、イラスト関連の良書がたくさん半額です
