記事をPicture-in-Pictureで読めるようにしてみた | stin's Blog
Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content — for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier Picture-in-Picture API for <video>, whi
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つWebデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ 1. 要素を斜めに配置通常 CSS でレイアウトを組んでいくと、垂直平行のボックスが並んでいくことになりま
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
Photoshopで人物の髪の毛を切り抜く｜| Woops'dez | Bloggin'
人物の切り抜きにはよく「パス」を使います。 しかしながら髪の毛はとっても大変。ここではちょっと楽が出来る切り抜きTIPSをお送りします。 まぁ、私のやり方なので名フォトショッパーさんはもっとグレイトなTIPSを持っているかも知れませんので、そしたら教えてくださいなー。 1.切り抜きをすませる 問題の部分は適当に残しておきましょう。 こんな感じ。 2.背景→レイヤーにする 鍵の付いているレイヤーをダブルクリックすると、「背景」ではなく「レイヤー」になります。こうすることで、チャンネルなどいろいろ遊べるようになります。 こんなダイアログが出てくるのでとりあえずOK押しちゃえ。 「背景」と「レイヤー」の違い 「背景」 消しゴムなどで消しても後ろが白いままで透過されない。 移動が出来ない チャンネルの複製など出来ない などなど レイヤーにするとこれらのことが全て出来るようになります。 3.「チャン
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
Interface.jsで簡単スムーススクロール - Emotional Web
This domain may be for sale!
スポットライトが当たったような画像を作る方法 | P O P * P O P
今回の諦めている不便利はfkojiさんからの投稿です。投稿ありがとうございました。 popxpopでも使われてる、画像の一部分にスポットライトをあてたような効果を出す方法を知りたいです。 実はこれ、意外と簡単に作っています。画像編集ソフトのおかげですね。 実際に画像を加工しているところを見た方が分かり易いと思いますので、早速作り方を紹介してみます。 なお、今回のお題は、『Googleの検索テキストボックスにスポットライトが当っている画像を作る』です。 ちなみにPOP*POPでは画像編集ソフトとしてPhotoshopを使っています。ただ、Photoshop ElementsやGIMPでも同じようなやり方で作成できることを確認していますので、参考にしてみてください。 詳しくはこちらからどうぞ。 はじめに、元となる画像をPhotoshopで読み込んでおきます。 はじめに、選択ツールで、スポットラ
サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 [絵文録ことのは]2006/11/25
このブログの本文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも（狭すぎると困るが）はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな
関口由紀の男性のトイレが多くて熟睡できない夜間頻尿対策と治療
Julen är en tid för värme, ljus och att bara mysa i vintermörkret. Det finns så mycket att älska med den här tiden på året, från doften av pepparkakor till gnistrande snö under fötterna. Här har vi samlat tio saker … Hur man hanterar svartsjuka genom att förstå den Svartsjuka är en naturlig mänsklig känsla. Vi har nog alla känt den, vid olika tillfällen. Det utlöses av rädslan att förlora något so
sta la sta - カッコいいロゴをデザインするためのノウハウ集
Before & After | Email article: 0363 Design a logo of letters 魅力的なサービスや企業には魅力的なロゴがつきもの。例えばflickrなんかは一目でそれと分かるインパクトの強いロゴデザインを採用している。 あなたもただ英字を並べる以上のカッコいいロゴをデザインしたいのなら、こちらのサイトで配布しているドキュメントが参考になると思う。 この『How to design a logo of letters』というドキュメントでは、英字ロゴを作る際にどういう並べ方をするとカッコ良くなるかを実例を挙げて説明してくれている。 どれもこれもちょっとした工夫なのだけど、その工夫があるのと無いのとでは、見る人に結構違う印象を与えると思う。ぜひとも全部覚えておきたい。 これから新規にサービスや製品をリリースすることを考え中の方は、ロゴを考える前にぜひ
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
jigelog » デザインの色設計に関する3つのステップ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちょっと便利なCSS Tips いろいろ - DesignWalker
Ajaxでおしゃれな小窓を作る6つのサンプル*ホームページを作る人のネタ帳
スタイルシートスタイルブック