Web担メモ
ログイン メモする
Web担メモ
  • HOME

Web担当者が、日々の業務の中で役立ったことをメモしています。


マテリアルデザインのボタン

U3
2020/4/20
2024/11/7

編集にはカテゴリー認証が必要です ▼受付終了にする

マテリアルデザインはGoogleにより明確なガイドラインが発表されています。「ボタンの位置や形」や「影のつけ方」までルールが決まっています。


https://saruwakakun.com/html-css/material/vs-flat


参考URL https://material.io/design

コメント

コメントはまだありません。

関連する投稿

ゴリラ実験(注意の錯覚)ハーバード大学
ハーバード大学の研究室が行った、人間の注意力に関する実験があります。まずは、動画を見てください。黒いシャツのチームと白いシャツのチームが入り乱れながら、互いにバスケットボールをパスし合っています。「白いシャツのチーム」がパスをする回数を数えてください。複数人が動きながらパスしているので注意力が必要です。動画は埋め込むことができなかったので、YouTubeで「バスケット ゴリラ」などで検索して動画を見た後で、下のコメントを読んでください。↓

デザイン

  • 1
  • 2952
  • 0
U3
マテリアルデザインとは? 導入方法など
マテリアルデザインについて 2014年にGoogleが発表したデザインのガイドラインのこと。 UIデザインの変遷スキューモフィズム → フラットデザイン・モダンUI → (わかりにくい) → マテリアルデザイン  → ニューモーフィズム(2020~)マテリアルデザインは現実世界を表現マテリアルデザインでは、光、影、奥行きの表現を追加することで、現実世界の物が持つ「質量」表現している。参考URL マテリアルデザインでやってはいけない72のこと(間違いチェックリスト)https://saruwakakun.com/html-css/material/failure マテリアルデザインでの「ボタン」の使用ルールと作り方(サンプルCSS付)https://saruwakakun.com/html-css/material/button マテリアルデザイン https://material.angularjs.org/latest/demo/フレームワークによる実装Material Design for Bootstrap 4https://mdbootstrap.com/docs/jquery/https://uxmilk.jp/76081

デザイン

  • 0
  • 257
  • 0
U3
自動で背景を切り抜いてくれる、無料のサービス「切り抜きAC」
AIが自動で画像の背景を切り抜いてくれるサービスが出ています。切り抜きAChttps://clipping-ac.comフリー素材を配布しているACワークスさんの提供サービスです。実際に、このツールを使って切り抜いた使用前、試用後の写真を下に貼っておきます。調整なしでもこんなにきれいに切り抜けました。あとから微調整もできるようです。使い方https://blog.acworks.co.jp/2021/05/24/kirinukihowto/簡単Photoshopでもかなり簡単にきれいな切り抜きができるようになりましたが、そもそもPhotoshopを持っていない方も多いと思います。今までPhotoshopを起動して切り抜いていた手間も省けます。デザイナーでなくても、これで簡単に画像の切り抜きができるようになりました。これからは専門スキルよりも、「やりたいことがある人」だけが仕事をするようになるのでしょうね(弁護士ですらAI化されるという話もあるくらいです)。こういった便利ツールを使って、どんどん効率化していきましょう。

デザイン

  • 0
  • 191
  • 0
U3
AdobeXD無料のスタータープラン

デザイン

  • 0
  • 165
  • 0
U3
Dreamweaverでファイルを開くと、『・・・.cssへのアクセス中に共有違反が発生しました。』というメッセージが
根本原因は不明ではありますが、問題となる"font-awesome.min.css"を、それぞれのサーバー上のcssディレクトリに置いて、"font-awesome.min.css"のフォントの"url"を"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0//fonts/ ..."に置き換えることで、作業も運用もエラーも出ずに取り敢えず行えております。

デザイン

  • 0
  • 1236
  • 0
U3
PDFのテキストをコピーペーストすると、文字化けする【解決】
pdfを開いて「ファイル」→「書き出し形式」→「スプレッドシート」→「MicrosoftExelブック」で保存。

デザイン

  • 0
  • 1355
  • 0
U3
レスポンシブデザインでWebサイトのデザインを作成する方法
https://marketingnative.jp/how-to-create-a-responsive-web-design/

デザイン

  • 0
  • 102
  • 0
U3
SNSの公式ロゴアイコンのダウンロード元(Instagram,Twitter,Facebook)
WebサイトなどにSNSのアイコンを設置する場合は、公式ロゴアイコンを使用しなくてはなりません。また、勝手に色や縦横比率を変えたりしてはいけません。それぞれに使用の際のガイドラインがありますので、ガイドラインに沿った使い方をしましょう。Instagram公式ロゴダウンロードページhttps://www.facebook.com/brand/resources/instagram/instagram-brand/ガイドラインhttps://www.facebook.com/brand/resources/instagram/iconsTwitterhttps://about.twitter.com/ja/who-we-are/brand-toolkit.htmlFacebookhttps://ja-jp.facebook.com/brand/resources/facebookapp/logo

デザイン

  • 0
  • 917
  • 0
U3
チャットボット SYNALIO
誰でも直感的にチャットボットを作成できる SYNALIO https://synal.io/  

デザイン

  • 0
  • 76
  • 0
U3
アコーディオンメニューの設置とデザイン【アイコンの選択からラベルの配置まで】
アコーディオンメニューは、>アイコンではなく、+アイコンを選ぶのが正解!アイコンは左に置くとユーザーはラベルをクリックするので操作時間が短縮折り畳みラベルは-(消去、削除)ではなく×(閉じる)愛Kのを使うのがDo!ユーザーの期待に沿ったアイコンを使う

デザイン

  • 0
  • 184
  • 0
U3

アクセスランキング

1

Excelで一つの値を一番下のセルまでコピーしたい時

8

2

Google Playストアでアプリを一時的に非公開にする方法

6

3

自分のチャンネルのYouTube動画に広告が表示されないようにしたい

5

4

Webデザイナー+コーダー=Readdy

4

5

ホームページで複数ページのヘッダーとフッターを共通にするサンプルコード

4

6

NEWマークを任意の日数だけ表示させる(JavaScript)

4

7

★リスト表示をjQueryで絞り込んで表示させる方法(フィルタ機能)

4

8

Google広告で領収書や支払明細を発行したいとき

4

9

Adobe:Special characters must be escaped :[<].と出た

4

10

ロケットチャットの新規通知をデスクトップ表示させるには

4

11

顧客管理:BASEの例

4

12

Excel:都道府県をプルダウンで選択すると、その都道府県の市区町村だけが次のセルの選択肢として出てくる

4

13

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

3

14

コンタクトフォーム7のテキストエリアのサイズ指定方法

3

15

App Storeでアプリを一時的に配信停止にする方法

2

16

rakuten handを初期化しても電話番号の情報が残っている

2

17

WBMP形式の画像ファイルとは

2

18

VSCodeで複数ファイルを横断して検索&置換する方法 Option+Shift+F

2

19

ホームページのアクセスカウンターは最近なぜ見なくなったの?

2

20

Facebook広告:Facebookピクセルとは?

2

コメントランキング

1

AIO (AI最適化) 重点要件

1

2

AIコピペハラスメントとは?〜AIが生成した文章をそのまま送るのはやめよう

1

3

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

1

いいねランキング

1

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

2

2

Looker Studio(Googleが無料で提供するBIツール)

1

3

AIコピペハラスメントとは?〜AIが生成した文章をそのまま送るのはやめよう

1
この投稿者に問い合わせ
この投稿者に問い合わせ

当サイトでは、Cookieを使用しております。

すべての Cookie の使用に同意いただける場合は、下記の「同意します」をクリックしてください。

  • シェア
  • ログイン
  • 利用登録する
  • ログアウト
  • マイアカウント
  • メモする
  • このサイトについて
  • 問合せ
Copyright © Web担メモ
シェア
いいね! X このエントリーをはてなブックマークに追加 LINEで送る