html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開

フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-

今回は最近のWeb制作業界でよく利用されている日本語Webフォントを実用化する方法について紹介したいと思います。 ちなみに私がWebフォントに憧れるようになったのは、佐野章核さんというグラフィックデザイナーが作ったWebサイトを見たことがきっかけでした。 この前見た夢Konelこの佐野章核さんはグラフィックデザイナーを名乗っているのにも関わらず、Photoshopやイラレのエフェクトをあまり使わない海外っぽいデザインが印象的です。 それでいて、日本語サイトではあまり見ない日本語Webフォントを用いて美しいタイポグラフィーによる先進的なデザインを実現しています。 モバイルファーストの時代に突入するにあたり、今後はこのようなサイトが増えていくのではないかな〜という新時代到来を予感させてくれました。 Webフォントを使うメリット、デメリットについて日本語Webフォントが最近流通し始めている背景に

素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな

ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。 最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。 今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。 目次 マテリアルデザインとは？ 平面なのに3D 紙とインク マテリアルデザインのカラー グリッドシステム アニメーション 心地の良い動き タッチフィードバック 意味を持ったアニメーション まとめ マテリアルデザインとは？ マテリアルデザインを直訳すると「物質的なデザイン」という意味です。 デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。 平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま

$ git clone git@github.com:sanographix/rin.git test-repo $ cd test-repo $ npm install $ npm start

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます！ ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン

ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ

こんにちは。 先日父親からPhotoshopとLightroomを間違って購入したという話を聞かされなんとも言えない気持ちになりました、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 Photoshopとペイントの違いもわからなかった父の口からLightroomなんて言葉を聞く日が来るとは思いませんでしたね（買い間違えてるけど） さて本題ですが、皆さん音楽はお好きですか？ 私はもっぱら平井大さんの歌しか聴きませんが、人それぞれ好みの音楽があるかと思います。 音楽業界にそんなに詳しくない私ですが、やはり厳しい業界であることは重々承知しております。そのため、アーティスト個人の能力をフィーチャーするだけでなく、さまざまなPR企画やパフォーマンスを持ったWebサイトなども度々見かけます。 今回は、そんな音楽業界で活躍するアーティストの方々のサイトを集めてみました。 結構厳選したつもりだ

Typescale Save CSS Go Pro Login Typescale New Board My Boards Bookmarks Likes Explore Login Go Pro Support Terms Privacy © Typescale Board Settings Responsive Body size Scale Responsive Min-width Body size Scale Body Font Weight Line-height Letter-spacing Color Background Headings Font Weight Line-height Letter-spacing Color

本文と見出し、中見出し、小見出しのフォントサイズはどのように決めてますか？ 一つの方法として、一定の比率でそのサイズを決めるのも有りです。というか、そうやってよく決めてました。 さまざまな比率をベースにして、本文や見出しの各フォントサイズを検討できるオンラインサービスを紹介します。 Type Scale 左の各項目は、下記のようになっています。 Base Size ベースにするフォントサイズを入力します。 Scale 比率を選択します。 1.2, 1.414, 1.618などよく使う比率だけでなく、カスタムで数値を入れることもできます。 Preview Text 表示するテキストを入力します、日本語でも可。 Google Fonts 日本語で利用する場合は、特に変更はいりません。 Font Family 明朝体の時は「serif」、ゴシック体の時は「sans-serif」を入力。 Weig

Photoshop CCをダウンロード Edge Reflow CCをダウンロード サンプルPSDをダウンロード Webデザインの世界において、Photoshopは決まった幅（固定幅）のデザインを作るツールです。レスポンシブデザインのために、いろいろな幅のデバイスを想定したデザインを作るには、PSDを何枚も作る必要がありました。 この記事では、Photoshop CCの最新版とEdge Reflow CCの最新版を使用して、PhotoshopからデザインをEdge Reflowに書き出し、レスポンシブなカンプを作るワークフローを紹介します。 前編では書き出したものをスマートフォンで見るところまで、後編ではレイアウトなどを調整して仕上げていく過程を紹介します。 必要な準備 Creative Cloudで、Photoshop CCとEdge Reflow CCを最新版に更新してください。

2024年秋冬コレクション広告キャンペーン個性に光を当てた、サバト・デ・サルノによるウィメンズ コレクションの最新広告キャンペーン。 さらに見る A Gucci Client Advisor is handling a Boutique shopping bag with a white Gucci logo. The bag is in Gucci Rosso Ancora, a distinctive color chosen by Creative Director, Sabato De Sarno, to mark the beginning of Gucci's new creative chapter. The Gucci bag is presented to a customer. The customer takes the bag and goes downstairs

<a href=\"https://www.casio.com/jp/casio-id/\">CASIO IDで新しい体験を</a></p>\r\n"}}" id="text-736e2c2f04" class="cmp-text"> CASIO IDで新しい体験を <b><span class=\"cmp-text--size-36\">BABY-G</span></b><br>\r\n<b><span class=\"cmp-text--size-40\">BA-110YK</span></b><br>\r\n</p>\r\n","xdm:linkURL":"/content/casio/locales/jp/ja/products/watches/babyg/products/anadigi/ba-110yk.html"}}"> <b><span class=\"cmp-text--

Webページ上でベクターのアイコンを簡単に表示できる憎いアイツ。そう、アイコンWebフォント。 Retinaディスプレイでも綺麗に表示されるし導入は（そんなに）難しくないし至れりつくせり。 セマンティック？なにそれおいしいの？ そんなわけで今回はよく使っておりますアイコンWebフォントのセットと、ジェネレーターをまとめてみました。 ※紹介しているフォントを使用する際は、ライセンスを必ずご確認ください。 Font Awesome とっても有名なアイコンフォント、Font Awesome。600を超えるアイコンを使用できるのが特徴です。ソーシャル系のアイコンも揃っております。線のRは少し強めの印象。 個人・商用利用なのも嬉しい。 Font Awesome, the iconic font and CSS toolkit Entypo キリッとしたアイコンがエレガントなイメージなのがEntypo