フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
こんにちは。コミュニケーションアプリ「LINE」のモバイルクライアントを開発している石川です。 私達は、高い開発生産性を維持するために、コード品質と開発文化の改善に注力しています。 そのために様々な取り組みを行っているのですが、その 1 つとして Review Committee の活動があります。 Review Committee では、マージ済みのコードを再度レビューし、レビューアとオーサーにフィードバックしたり、レビューで集めた知見を Weekly Report と称して毎週共有したりしています。 この Weekly Report で共有される話題は、Android や iOS といったプラットフォームや、Kotlin や Swift 言語固有の注意点も含まれるのですが、多くの場合はプログラミング一般に適用できるものになるように配慮しています。(ただし、説明のために使うコードは Ko
ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by Jim Nielsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Flexboxで左と右の両端揃えにしたい 解決方法1: マークアップを追加する 解決方法2: flex-growを使用する 解決方法3: margin: auto;を使用する はじめに これは一見すると些細なことですが、ようやく最終的な解決策にたどりついたので、記事に書こうと思います
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 UI & UX Micro-Tips: Volume One. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 装飾的な要素をたまに使うのは全く問題ありません 2. UIの要素は互いに区別できるようにする 3. シャドウはわずかな量があるだけで十分 4. 見た目的に分かりやすいフォントを選択する 5. パンくずはユーザーが理解しやすいようにする 6. 彩度の高いカラーは慎重に はじめに 次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがありま
ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか? 実際のところ実務ではライブラリやフレームワークから返却されたPromiseをそのままawaitするだけ…という使い方がほとんどかもしれません。しかし、これらのライブラリやフレームワークの中で利用されているような高度なPromiseの活用法をマスターすれば、もっと自由なプログラミングができるようになります。 この記事ではPromiseを活用した実践的な例を3つ紹介します。いずれもライブラリやフレームワークに類似の機能を持つものはありますが、仕組みを理解
デザインしてて文字をばちっと決めたいときってありませんか メインビジュアルや見出しなどで、「文字(コピー)をばちっと決めたいッ!」ってときありますよね。そのときに普通の書体をそのまま置くと、 どうしてもデフォルト書体そのまま感が出ちゃうときってありませんか? もちろん出ちゃわないときもあります。でも出ちゃうときもありませんか? うん、ですよね。 そんなときの解決策の一つ、「作字」 “デフォルト書体そのまま感”をなくす方法はいくつかありますが、その一つとして「作字」があります。デフォルトの書体を少し調整して文字に特徴をつけることですね。 文字を”ちょっとロゴっぽくする”するという言い方が近いでしょうか(わかりにくいか……)。 作字するといい意味で”違和感”がでて、印象的なビジュアルになります。その作字のひとつに「文字を溶かす」という小ワザがあります。 文字を溶かすって? Afterの文字を拡
インターンシップ2018の講師を務めた電通社員が、自身の思考法や企画術、仕事への取り組み方を紹介する、本連載。最終回となる今回は、電通ビジネスデザインスクエアの小島雄一郎が、企画書でアイデアを伝える際のポイントをお伝えします。 三つのフェーズでテクニックを活用し、アイデアの本質をあぶり出す 「企画書はいらない」「PowerPointに時間をかけるなんて愚かなことだ」 そんな声をよく耳にします。それでも私は12年間、企画書を書き続けています。プレゼン資料だけではありません。若い頃は飲み会をやる時も、後輩を指導する時も、伝える時の手段はすべて企画書でした。 自分が考えたアイデアを信じてもらうために、実現するために、誰もが納得できる企画書をつくる必要がありました。 ただ、そこで身に付けた「企画書力」はさまざまな場面で役に立っています。本を書きたいと思った時、企画書があったから出版までこぎ着けられ
冷凍シーフードミックスは手軽に使えて便利ですが、調理のときに「小さく縮んでしまう」「臭みが気になる」と思っている人もいますよね。そこで今回は、シーフードミックスがプリプリになる「塩水解凍」の方法と、臭みを出さない調理テクニックを紹介します。 冷凍シーフードのおすすめの解凍方法は「塩水解凍」。海水と同じくらいの塩水(塩分濃度3%程度)に浸けることでシーフードから水分が流出することを防ぎ、プリプリの食感に。シーフード本来の旨味をキープすることができます。 【用意するもの】 シーフードミックス150gに対して 水…1カップ 塩…6g 【解凍方法】 1 ボウルに塩水を作ってシーフードミックスを入れ、30分〜1時間おく 塩をしっかり溶かしてからシーフードミックスを入れる。常温で夏場は30分、冬場は1時間を目安におく。塩水に漬けても旨みは流出しない。 2 指でつまんで解凍できたか確かめる 指でつまんで
TwitterのUIデザインで見つけたCSSのテクニックを解説した記事を紹介します。 さまざまなコンテンツが入る可能性のあるコンポーネント、コンテンツが長い・短い場合、アイテムの数などを想定した興味深いテクニックが解説されています。 CSS Findings From Twitter Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバター画像のアスペクト比 CSS calc()関数の謎の使い方 CSSの背景とHTMLの画像の混在 スタイルのリセット CSSのposition: sticky; スペース要素 ツイートコンテンツの追加方法 スペースにハードコードされた値を使用する ナビゲーションリンクの幅 念のためのマージン ビューポートの高さが小さい場合のモーダル はじめ
【映画を早送りで観る理由 #3 若者の「タイパ至上主義」】 映画やドラマ、アニメを倍速視聴、もしくは10秒飛ばしで観る習慣に対する違和感を、記事「『映画を早送りで観る人たち』の出現が示す、恐ろしい未来」に書いたところ、大きな反響があった。その内容を深堀りした記事を全4回で配信する本企画、今回はその第3回。 前回記事「『オタク』になりたい若者たち。倍速でも映画やドラマの『本数をこなす』理由」では、特に若者たちのあいだで倍速試聴の現象が広がる理由について考察した。 彼らは拠りどころが欲しい。個性的でありたい。その結果、オタクに憧れる。カルチャーシーンから“メジャー”が消え、ゆとり教育のなかで「個性的であれ」と言われて育った若者たちがそうした傾向をもつことは、まあ、理解できる。 ただ、彼らはその“オタクになる過程”を、「なるべくコスパ良く済ませたい」と願う。「観ておくべき(読んでおくべき)重要作
メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニックを紹介します。 下記のようにヘッダのロゴと記事のタイトルを揃えたい時はありませんか? CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できます。デスクトップの大きいスクリーン、スマホなどの小さいスクリーン、記事が長くてスクロールバーが表示される場合などにも対応しています。 Aligning Content In Different Wrappers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 固定幅と流動幅でツラを揃える 動的なパディングを実装するテクニック スマホでのパディングの処理 このCSSをどこにでも使用できるようにする スクロールバーで位置がずれる問題を
猫宮杏子(あんず)・音声サークル主 @nekomiya_anz @yontengoP 変に誤魔化すわけでも、絶対に言わないと拒絶するでもなく、やる気をさげたり関係性の悪化とかしないようなうまい解答なので、人付き合いとか相手を見ての対応がうまいのかなって感じますにゃん。(=゚ω゚=) 2023-10-08 17:01:22 Yayoi @Yayoi07242328 @yontengoP 微笑ましいネ〜😉 高校から大学ぐらいの若い男子の会話面白いよね🤣 おばさん発言やけど〜😅 あと、エレベーターで「開」ボタンを押してあげた時に、「あざーす🙇♀️」ってお礼言ってくれる男子好き❤️ 2023-10-08 21:06:14
🍎万有引力のR @inryokunoryoku 猫の注射のとき先生が「耳くしゃくしゃ〜ってやってください。わけわかんなくなっちゃうからその間に注射しまーす」ってやって見せてくれたからそれやって猫が「うひ〜!」ってなって怒らなかったおもしろかった 2020-01-25 20:30:54 🍎万有引力のR @inryokunoryoku 先生「くしゃくしゃ」言ったけど実際はアタマ掴んでグニグニなんだよね ネコがあまりにもかわいいときやっちゃうやつ だからネコ「病院だってのにおかんってばもうっ💕💕」ってなるんかもね 2020-01-26 00:10:43 🍎万有引力のR @inryokunoryoku おもしろいね 私一言も「痛がる」って言ってないんだけどね たいていの子は保定を嫌がるからアタマグニグニされて体が動いてない間にやっちゃおうって話だよ😊 保定なんて何されるかわかんないし、
はじめに レスポンシブサイト構築の際に、何かと悩む(ちょっと煩わしい)のがfont-sizeの指定方法なのではないでしょうか? 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち(④が最もおすすめ!サクッと読みたい方は③(④の序章みたいな感じです)からどうぞ!) ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
Google ドキュメントなどのワープロソフトでは、目立たないところに機能の宝庫が隠されています。そうした機能を使えば、大規模なドキュメントの草案をつくるのも、同僚と協力してそれを仕上げるのも簡単になります。 Google ドキュメント活用のヒントについては、以前の記事でもいくつかご紹介しましたが、この記事では、さらにもういくつかを紹介します。 1. 「マークダウン記述」で作業速度を高めるImage: Saikat BasuGoogle ドキュメントは、「マークダウン記法」をいくつかサポートしています。 そのおかげで、プレーンテキストの記号を使ってドキュメントの書式を簡単に整えて、読み書きしやすいものにできます。さらにより高度な書式への変換も可能です。 この機能を有効にすることで、書式を変えたい部分の前後に記号を入れることで、すばやく書式を変更できます。(「_」で囲めば斜字体、「~」で囲め
有限会社安井ファーム @yasuifarm 大切なことなので何度でも申し上げますが、ブロッコリーは #アイラップ などのポリ袋に入れてチルド室で保存すると2週間はナイスブロッコリーを保つことができます チルド室があいていない場合は冷蔵室と野菜室のうち、最適保管温度(0℃)に近い方にて保管いただけますとオッケーブロッコリーです pic.twitter.com/4NcUzNRU4x 2022-12-14 10:46:36 有限会社安井ファーム @yasuifarm 弊社におきましても、ブロッコリーをできるだけ0℃に保つため、発泡スチロールの箱に氷詰めするスタイルにて出荷しております。 ツボミの集合体であるブロッコリーは収穫後も活発に呼吸しているため、0℃環境におくことで呼吸を抑え、劣化を最小限に抑えることができます。 pic.twitter.com/t38Wo9PWP3 2022-12-14
知っておくと便利!表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
会社ではありがたいことに、自分より他人の功績を強調するタイプの人が多いが、真逆の人もたまにいる。 テレビドラマなどに登場する「手柄を横取りするキャラ」は、「本人が意識してやっている」「上昇志向が強いので人を蹴落とそうとする」という描かれ方が多いかと思う。現実にそのタイプの人を見ると、もっとナチュラルに、たぶん本人は無意識に、本気で「自分のおかげで物事がよく進んだ」と信じてやっているようだと思った。 「手柄の横取り」のベースに我の強さや、他者の自尊心の軽視などもあって、その辺をある程度類型化してみようと思った。 行動様式・特徴 人の発言やアイデアを自分が気付いたかのように言う。 話の流れと無関係なトピックを無理やり(人の話を遮ってでも)ねじ込む。自分のフィールドに持ち込もうとする。 「この場で自分が一番わかっている」をアピールする。 意見を否定されると攻撃と認定して、徹底的に反撃しようとする
一般にプログラマーはコードを書いている時間より読んでいる時間の方が長いと言われており、わかりやすい命名は可読性や保守性の観点から非常に重要です。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 前回の初級編では、わかりにくい命名をした場合の問題点や、JavaScriptで共通認識となっているルール、すぐに使える命名テクニックを紹介しました。 上級編の今回は初級編で紹介したものでは表現しきれない、より複雑な処理を行いたいときに役立つ表現を集めました。 命名テクニック上級編 1. 有効 / 無効 の状態の表現 オブジェクトやステータスが有効か無効かを表現する単語です。
WebサイトやスマホアプリのUIに使用されているボタンをデザインするときに気をつけるポイント、より使いやすくするためのポイントを紹介します。 UIのボタンは色だけに頼らない明確な視覚的階層が必要で、同じスタイルの場合は区別できるようにデザインすることが重要です。 Button design tips to avoid common mistakes by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに UIのボタンで見かけるよくある間違い ボタンをデザインするときに重要なこと より良いボタンにする方法 より実践的なUIデザインのガイドライン はじめに 私はデザイナーになって20年が過ぎ、多くのプロジェクトでボタンを使用してきましたが、ボタンのデザインについて深く考察する時間を取っていなかっ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今回は特別編として、8ビットのドットUIに関するデザインのテクニックです。 UI & UX Micro-Tips: 8-Bit Edition by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。 UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。 今回のテーマは、8ビットのドットUIです。前回まで
* { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: hsl(0, 0%, 20%); } .wrap { position: relative; } .text { font-size: 20vw; line-height: .8; color: whitesmoke; text-transform: uppercase; font-weight: bold; /* background-color: pink; */ } .wrap .text:nth-child(2), .wrap .text:nth-child(3), .crack { positio
-------------------------------------------------------- -- users テーブルについて、部署・役職・作成日ごとに件数を集計する -- (MySQL用) -------------------------------------------------------- SELECT u.department_code `部署コード`, u.role_code `役職コード`, DATE_FORMAT(u.created_at, '%Y-%m-%d') `作成日`, COUNT(*) `人数` FROM users u GROUP BY u.department_code, u.role_code, DATE_FORMAT(u.created_at, '%Y-%m-%d') ORDER BY u.department_code ASC
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ ひと手間でガラリと変わる、これからの新しいCSS HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。 サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。 ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。 「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。 コンテンツ目次 1. キラキラに輝くホログラフをCSSで実装 2. クールなグラデーション背景のつくり方 3. oklch()による色の設定 4. 夢のような景色「Dreamy Blur」エフェクト 5. オフキャンバスのメニューをポップアップで実装 6. スクロール連動型のCSSアニメーション 7. 3Dなグリッチ・
カリフラワー定番野菜の冷凍 【カリフラワーの保存】冷凍・冷蔵方法を完全ガイド。変色を防ぐコツも! 【カリフラワーの保存】冷凍・冷蔵方法を完全ガイド。変色を防ぐコツも! いんげん定番野菜の冷凍 【いんげんの保存】冷凍で1ヵ月長持ち!生で冷凍することも可能 【いんげんの保存】冷凍で1ヵ月長持ち!生で冷凍することも可能 定番野菜の冷凍野菜のおかず レタスは冷凍できる!プロが教える保存方法と、美味しく食べる解凍レシピ レタスは冷凍できる!プロが教える保存方法と、美味しく食べる解凍レシピ 定番野菜の冷凍春野菜の冷凍 【スナップエンドウの冷凍】プロの保存テク&お弁当に便利な方法も! 【スナップエンドウの冷凍】プロの保存テク&お弁当に便利な方法も! キャベツ定番野菜の冷凍捨てないで 【野菜だしの作り方】玉ねぎの皮など「野菜くず」を捨てずに美味しく活用! 【野菜だしの作り方】玉ねぎの皮など「野菜くず」を捨
どうも、クラブハウス住人の徳力です。 なんだかんだクラブハウスの機能って、クラブハウスのルームの中で口コミで伝承されている印象が強いんですが。 やはり、クラブハウスを使い始めたタイミングでその辺の知識が大きく分かれている気がするので、自分が教えてもらったり自分で見つけたクラブハウスのちょっとした便利テクニックをこちらにまとめておきたいと思います。 【初級編】■名前のエイリアス設定をしましょうクラブハウスはインターフェースが英語なので、登録時に英語で姓名を登録した方は多いと思いますが、日本人はアルファベットだと名前が脳に飛び込んでこないので、基本的には漢字にするのがおすすめです。 で、クラブハウスは1度だけ「エイリアス」と呼ばれるニックネームを設定できます。 是非エイリアスに漢字の名前を入れましょう。 やり方は簡単、プロフィールをひらいて名前の所を押して、真ん中のAddなんとかを選ぶだけ。
ゲーム開発者が、自らの作品をSteamなどのストアにてリリースする際には、さまざまな作業が求められる。そのなかでは、消費者によりアピールするためのテクニックが存在するようだ。業界のベテラン開発者であり、パブリッシャーValadriaの共同設立者でもあるMatt Hackett氏が4月24日、Steamで作品をリリースする場合に役立つ「開発者向けチェックリスト」を公開。ゲーム開発者から多くの注目を集めている。 Steamでは原則、誰でもゲームを出すことができる。Steamworksに開発者登録をし、100ドル相当を支払う。その後諸々書類手続きを終えて、ストアページ作成していくなどすれば、パブリッシャーなどのサポートを受けていない個人でも、ゲームをリリースできる。しかしながら、出すことそのものは可能だとしても、ゲームがたくさん売れるかどうかは別問題。そこで、そうしたビギナー販売者向けのテクニッ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く