ドロップダウン式のスマホメニューを簡単に設置できるスクリプトの無料ダウンロード
ドロップダウン式のスマホメニューを簡単に設置できるスクリプトの無料ダウンロード 公開日 2018年7月17日 最終更新日 2021年10月25日 著者 Motohiro Tani ドロップダウン式(縦方向の折り畳み式)のスマホ用メニューを簡単に設置できるスクリプトを作りました。 名称は「スマホメニュースクリプト」としておきます。 今後、私自身がサイトを作る際に使うために作ったので、設定は最低限で済むようにできています。 CSSが理解できる人なら自由にデザインを変更することが可能でしょう。 現在の最新バージョンは2019年4月11日公開の2.0です。 参考ページ：プログラムをアップデートするの際の思想について 各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。 特長 スマホメニュースクリプトのサンプルとダウンロード 使い方の説明 既存サイ
【具体的なコードあり】スマホでグローバルメニューを表現する5パターン | HPcode（えいちぴーこーど）
.icon-hamburger { background: #fff; border: 1px solid #ccc; cursor: pointer; height: 50px; position: relative; width: 50px; display: none; margin-bottom: 0.4em; } .icon-hamburger span { background: #cccccc; display: block; height: 16%; left: 50%; margin: -8% 0 0 -42%; position: absolute; top: 50%; width: 84%; } .icon-hamburger span::before, .icon-hamburger span::after { background: #cccccc; conten
MaterializeCSSのDate Pickerを日本語化する - Null and void
ある意味本家GoogleのMaterial Design Liteよりも良くできているのではないかという感もあるMaterializeCSSですが、カレンダー形式で日付を入力するDate Pickerは一般利用者をターゲットとした場合、日本語化無しに使用してもらうのは困難です。 サイトの解説にはLocalizationに関する説明は全くありませんが、Javascriptのソースファイルを解析するとMaterializeCSSのDate PickerはDate picker - pickadate.jsが元ネタであることがわかりますので、そちらを見ると"translations"の解説がありました。 その解説とソースコードを参照すると、日本語化に必要なパラメータはこんな感じになります。 $(".datepicker").pickadate({ monthsFull: ["1月", "2月",
企画書のデザインに使える！無料のグラフ作成ツール・アイコン素材サイトまとめ
企画書や提案書を、読み手に気持ち良く理解してもらうためには「内容」はもちろん大切ですが「見た目」の綺麗さも重要な要素の1つです。 デザインに少しこだわった企画書が作れるだけで、周りの資料とは一味違ったものになるでしょう。そこで今回は、企画書の見た目をよくする際に無料で使える「インフォグラフィック」作成ツール・アイコン素材検索サイトをご紹介します。 インフォグラフィック（infographics）とは そもそもインフォグラフィックとは、情報・客観的なデータを整理し、視覚的に表現したものを指します。 ただ単に数値やデータを無機質に羅列させるだけでもよいのですが、他の人に情報をわかりやすく伝え、企画書を見る人の理解を深める手段の1つとして”インフォグラフィック”が利用されます。 オンライン上でデータを入力するだけで、簡単にインフォグラフィックを作成できるWebツールを4つご紹介します。 info
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://vdeep.net/wp-content/uploads/2015/08/bootstrap-flatui.png
DO: A free mobile productivity app UI kit | InVision
html5-memo.com
UIデザインに役立つツール