もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
Google Spreadsheet のデータを自動で Google Calendar に追加する - UUUMエンジニアブログ
おはこんばんちは!! 尾藤 a.k.a. BTO です!! スギ花粉の脅威に毎日怯えている皆様、ご機嫌いかがでしょうか。 最近は Google Spreadsheet や GAS(Google Apps Script) を使って社内業務の改善などをしております。 だって会社がどんどん大きくなってるから、業務の効率化を進めないと回らないんだもん!! Google Spreadsheet のデータを Google Calendar に追加したい!! 弊社では営業管理ツールに Salesforce 使っていて、他部署とのデータ連携のために、Salesforce のデータを Google Spreadsheet に同期しています。 ここに動画の公開日の情報があるので、Google Calendar にイベントを追加したいのが今回の目的です。 以前は、全て人が手作業で入力していたため非常にコストのか
「なぜ人は怪しい壺を欲しくなってしまうのか」セミナーの内容と補足説明
「価値」という言葉がありますが、価値ってなにか説明できる方っていますか？ 価値って言葉、日本語としてはなんとなく理解しているんですが、それを説明しろと言われると困ってしまいます。最初にも話しましたが、人は勝手に自分の脳内で都合の良いストーリーを紡ぎ出します。だからしっかり定義付けしておかないと、まったく違う方向の認識になってしまう恐れがあります。 というわけで、染谷が考える「価値」の定義付けをしておきます。 それは、「人類に役立つ事象 × 希少性 ＝ 価値」です。そして「価値観はひとそれぞれ違う」ということも重要なポイントです。 例を挙げます。 この中でダイヤのネックレスが欲しい人はいますか？なぜ欲しいのか、落ち着いて考えたことはありますか？ 価値の方程式に当てはめて考えてみましょう。それは「ダイヤのネックレスが胸元にあることによって、私の美しさが際立つから」じゃないでしょうか。あるいは「
159. 学参フォント 漢字の違うとこ
生命保険会社からいただく卓上カードカレンダー（2017年版）のインデックスに「一年生～二年生」「二年生」とあり、裏返して見ると、いわゆる教育漢字（学年別漢字配当表：学年ごとに習う漢字の一覧）が掲載されていました。「二年生」あたりを眺めてみると、漢字にはフツーのゴシック体が使われているように見えました。漢字だけでは違いが分かりにくいのですが、教科書体や学参フォントから感じる違和感がない、ということです。大人が見るぶんには、まったく問題はないのですが。 なんとなく見た目でではなく、具体的にどの漢字のどの部分を見れば「それが学参フォントではない標準フォントである」と説明できるのか、資料に当たってみました。 学参フォントは、“文部科学省の「学習指導要領」にある「代表的な字形」に準拠したフォント”です。標準フォントは、伝統的な活字を元にしていて、書体によって異なるデザインなのを、学参フォントは、“普
NEWマークを任意の日数だけ表示させる ｜ Tips Note by TAM
※※※URLが変更となりました。 以前のURLはこちら （http://tam-tam.co.jp/tipsnote/javascript/post729.html） ブックマークをされている方はお手数ですが変更をお願いいたします。※※※ 新着ニュースや記事などで“更新から一週間だけ「NEW!」マークをつけたい” ということが多々あると思います。 手動で更新するのはあまりに面倒ですよね。 方法はいくつかあるのですが、javascriptでわかりやすい方法をご紹介します。 以下を読み込みます。 <script type="text/JavaScript"> function new_mark(y, m, d, cl) { keep_day = 4; // この日数表示されます old_day = new Date(y + "/" + m + "/" +d); new_day = new Da
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
アイキャッチ画像サイズチェッカー｜TwitterやFacebookでのOGP表示を確認
TwitterやFacebookでシェアされたときに、アイキャッチ画像がどんなサイズでどう表示されるのかをまとめてチェックできるツールです。「文字がはみ出てしまわないか」「意図せず一部が切れてしまわないか」などを確認するためにご活用ください（表示は2018年7月時点のものです）。 画像を選択
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
メールをストレスフリーに！無料の神メールソフト「Astro」を紹介【Slack連携も完璧】 | SELECK [セレック]
正直ひさしぶりに、感動的なメールソフトに出会った気がします。その名は「Astro（アストロ）」です。 2017年3月にiOS、及びMac版がリリースされ、現在はAndroid版も公開済み。さらにAmazonが開発したAIアシスタントAlexaや、社内チャットツールSlackとも完全に連携しています。 （最後に説明していますが、Slackとの連携はマジで使えます。Slackユーザーにはほぼマスト、と言っても過言ではないかもしれないので、Slackユーザーは最後まで読んでね！） Astroは、Office 365とGmailのメールアドレスと連携させて使うことができます。一言で言うと、「超イケてるメールソフト」という感じです。 ▼実際に使ってみると、こんな感じの画面です。 Astroでできることを簡単に紹介すると、 チャット感覚でメールを書いて送信することができるようになる。 重要なメールを読
![メールをストレスフリーに！無料の神メールソフト「Astro」を紹介【Slack連携も完璧】 | SELECK [セレック]](https://cdn-ak-scissors.b.st-hatena.com/image/square/814cc4e3d1ed23e276634e760bbc7a453a923b82/height=288;version=1;width=512/https%3A%2F%2Fdpd29bjwmgbr8.cloudfront.net%2Fwp-content%2Fuploads%2F2018%2F06%2F14170049%2Feye7.png)
macOSでディスプレイ1枚で作業する技術 - Qiita
今まで、自宅・職場では外部ディスプレイを使って作業をしてましたが最近はRoostを使い始めて、家でも外でもRoostと外部キーボード、マウスで仕事するようになりました。これで肩の痛みが激減したので下を向いて作業する時間が多いと首の筋肉に引っ張られて肩が凝るみたいですね。 ここできになるのはディスプレイ1枚だと画面切り替え大変じゃないのってところなのですが、以前 @reoring さんに教えてもらって自分にすごいフィットしたので共有しておきます。あまりmacのデスクトップについての記事がないような。 [追記2020/11/16] macOS 11.0 Big Sur(Intel) で動作確認できました。Total Spaces2をBig Surより前から使っている場合は最新版(v2.9.6~)を再インストールする必要があります。 TL;DR デスクトップを10画面作成する ショートカットキー
Mac OS X のキーボードショートカット
キーボードショートカットを使う キーボードショートカットを使うには、1 つまたは複数の修飾キーを押しながら、ショートカットの最後のキーを押します。たとえば、「command + C」(コピー) を使う場合は、「command」キーを押しながら「C」キーを押した後、両方のキーを同時に離します。Mac のメニューやキーボードでは、特定のキーが記号で表記されることがあります。以下の修飾キーは、その一例です。 Windows パソコン用のキーボードでは、「option」キーは「Alt」キー、「command」キーは「Ctrl」キーまたは Windows ロゴキーで代用してください。 Apple 製の一部のキーボードでは、たとえば、ディスプレイの明るさ調整、キーボードの明るさ調整 など、特殊な記号や機能を割り当てられたキーがあります。こうした機能のないキーボードをお使いの場合でも、自分でキーボードシ
用途に応じて適切なPDFをIllustratorから書き出す｜DTP Transit
なお、PDFが重くなる主な原因は配置されているビットマップ画像です。ビットマップ画像をそのままにするのか、ダウンサンプルする（＝解像度を落とす）のか、等の設定を［圧縮］カテゴリで行います。 各プリセットには、その設定が施されていますので、把握しておかれるとよいでしょう。 PDF変換のワークフロー IllustratorからPDF変換（書き出し）を行う流れは次のとおりです。 ［ファイル］メニューの［複製を保存］をクリックして［複製を保存］ダイアログボックスを開く ［ファイル形式］を「Adobe Illustrator（ai）」から「Adobe PDF（pdf）」に変更する（Illustrator CS5では［フォーマット］） ［Adobe PDFを保存］ダイアログボックスが開いたら、［Adobe PDFプリセット］からプリセットを選択し、［トンボと裁ち落とし］などのカテゴリで調整する 書き出
favicon大解剖 〜必要サイズから検証時の注意点まで〜 | WebNAUT by Beeworks
※この記事は2016年3月8日時点で執筆された記事です。現在では仕様が異なる可能性があります。 faviconって何？どのサイズまで用意すればいいの？Windowsのカスタムタイルって？Androidでうまく映らないんだけど？ 単純なように見えて調べだすときりがないfaviconについて、基礎知識から説明いたします。 目次 favicon（ファビコン）とは？ faviconファイルの基礎知識 どのサイズを用意すればいいの？ 透過・非透過などデザイン時の注意点 Android対応の注意点 favicon実装確認の注意点 favicon.icoファイルの作りかた まとめ favicon（ファビコン）とは？ faviconとはfavorite iconの略で、主にブラウザのタブや履歴、お気に入りに表示されるアイコンや、スマホでサイトをホーム画面に置いたときの表示アイコンなどのことを指します。 ほ
知っていると役に立つ、Dropbox Paper のツウな機能 10 選
0 0 220 0 Dropbox Paper はただのドキュメント ツールではありません。アイデアを出しあいながら共同作業をするための自由なワークスペースです。簡単に始められる Paper ですが、使えるツールを少し増やせばさらに便利になります。基本機能だけではなく、もっと Paper を使いこなしたいとお考えの皆様に、10 種類のツウな機能をご紹介します。 1. テキストをハイライトする 長いドキュメントを作成したけれど、チームに見てもらいたいのは重要なフレーズ数か所だけ。そんな時は、特定のテキストをハイライト表示できるキーボード ショートカット（Mac では cmd + E、Windows では Ctrl + E）を活用しましょう。これで読む相手の時間も節約できます。 2. リンクを手早く作成する リンクを付けたい時は、テキストに URL を貼り付けるだけで完了です。後は Paper
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Keyboard Maestro 11.0.3: Work Faster with Macros for macOS
Gridulator: Make pixel grids, lickety-split
ベテランほど知らずに損してるIllustratorの新常識（6）正統派ベジェ使いの方はもちろん、ベジェが苦手が方も知っておきたいIllustratorでのパスの扱いの進化 - Adobe Blog
東京大学グローバル消費インテリジェンス寄付講座 - Chair for Global Consumer Intelligence
