予期しないことが頻発中。 無駄に疲れる。 スマホサイトで 「閉じるボタン」を設置することになってふつうに ＜a href="#" return false;"＞で 設置しました。 そしたらさ、閉じないわけですよ。 「jsで開いたウィンドウじゃないと閉じない」っていうから わざわざ開くボタン設置したページもつくりテストしてみたけど ・・・動かない。 色々調べていたら 「子ウィンドウのBODYタグ内に を書き加えて元の親ウィンドウとの関係を切ってしまいましょう。」 という記事を発見！ window.open()したウィンドウ内でwindow.close()しても閉じない問題 で、BODYタグに記述してみたら 閉じた！！！ けど、今回の案件、 BODYタグに勝手に追記が許されてないので b

まず、iPhone Xに対応していないWebサイトはSafariブラウザではどのように表示されるのでしょうか？ ポートレートモードでは一見正しく表示されます。 下向きにスクロールするとステータスバーが表示されなくなり、画面下部のラウンドした領域にもコンテンツが表示されます。 早い話が、追尾型広告のようなページ下部に表示されるコンテンツに重要なコンテンツやナビゲーションを配置すると、クリックされない可能性が高くなります。 また、ランドスケープモードでははっきりと違いがわかります。 ツールバーやステータスバーは全画面で表示されます。 中央左右に安全領域がありますが、それ以外の部分もbody要素のbackground-colorで描画されます。 なお、背景画像を指定していても無視されるということを覚えておきましょう。 そのほかにも、セーフエリアの存在でデザイナーが意図した描画がされない状態になり

CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ

calc()関数を使用すると、レスポンシブ対応ページのレイアウトや要素の配置、ビューポート幅に基づいた相対的なフォントサイズの定義などが期待通りに実装できます。 Webページやスマホアプリの実装に役立つcalc()関数の使い方を紹介します。 calc()関数はOpera Miniを除くすべてのメジャーブラウザ（IEを含む）にサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 Calc() function with Use Cases 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()関数とは calc()関数を使おう calc()関数の使い方: 相対的な固定要素の配置 calc()関数の使い方: 天地左右の中央に配置 calc()関数の使い方: ビューポート幅に基づいた相対的なフォントサイズ ca

作成：2018/05/14 更新：2018/05/15 Webデザイン > 今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。（参考：2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集）今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。 エンジニア速報は Twitter の@commteで配信しています。 2018年微増しているレイアウトの傾向 最近少しづつ増えてきたレイアウトは ファーストビュー周辺に余白を取り入れる 余白の中にメニュー等を配置 縦、横に分割 画像と文字を不規則にレイヤーさせる 整列を一部崩している フェードやスライド以外の複雑なエフェクト といったところでしょうか。それでは少し例を見てみましょう。 横にセパレート 縦に分割するスプリットスクリー

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどのように使用されているかが分かります。 5,000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります。 The Front-End Tooling Survey 2018 by Ashley Nolan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Q1. フロントエンドの経験年数 Q2. CSSの知

イラストレーターのaiファイルが別々のファイルでバラバラになっていると、PDF変換が大変です。 ここでは、このような際に便利な、PDFファイルへの一括変換の方法について説明します。 イラストレーター立ち上げ、「Bridge」を開きます。 当該フォルダを開いた後、一括保存したいファイルを同時選択し、右上の「出力」の「テンプレート」を「最大サイズ」にし、画面下の「保存」をクリックします。

コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ

2017年10月24日 便利ツール 先日行ったCSS Nite in HIROSHIMA Vol.10では初めてのライブコーディングを行いながらの登壇でした。今回はそこでコーディングデモを見せるために利用したツール「Web Maker」を紹介します。 ↑私が10年以上利用している会計ソフト！ Web Makerって何？ Web MakerはHTMLやCSS、JavaScriptのコードを書けば、リアルタイムでプレビュー表示できるChrome拡張です。こういったコードのプレビュー・保存はずっとCodePenを使っていましたが、Web Makerのいいところはオフラインで使えるところ！CSS Nite in HIROSHIMAの会場ではWifiが利用できなかったのと、仮にインターネット環境があったとしても遅延があると嫌だなぁということで今回はWeb Makerを試してみました。 ちなみにCod

Web制作者のためのおすすめChrome拡張普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ Web DeveloperChrome 拡張｜Firefox Add-on｜GitHub｜公式サイト Web に携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1 クリックで CSS や JavaScript を無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスや ID 名の表示、定規やカラーピッカーまで揃っています！カラーピッカーは CSS で定義されたものだけでなく、画像からも抽出できるのがすごい。 CSS PeeperChrome 拡張｜公式サイト UI の美しさが魅力のデザイナー向け拡張。今開いているサイ

tableの諸要素（thやtdなど）の幅をwidthで指定した際、IEなどで表示すると、上手く幅指定が出来ていない場合があります。そういった場合の対処法についてご紹介します。 HTML

色見本帳の作成で、世界的に知られているパントン（PANTONE）社が、2018年の流行カラー、すみれ色「ウルトラ・バイオレット」（Ultra Violet 18-3838）を発表しました。 2018年の流行カラーは、独創的で想像力豊かで、未来への道を切り開くカラーリングが特徴となっています。 PANTONE今年の色をまとめたカラー見本帳 2000〜2017年（CMYK・RBG・HEXコード収録） 2018年の流行カラー、すみれ色「Ultra Violet ウルトラ・バイオレット」 2018年の流行カラーに選ばれた「ウルトラ・バイオレット」は、日本でいうスミレ色で、ドラマチックでじっくり考えぬいた紫色の色合いで、独創性や創意工夫、先見性を伝えることができるカラーリングです。 これまでにも紫色は、芸術的な輝くを象徴するカラーリングとして、デヴィッド・ボウイやジミ・ヘンドリックスなどの音楽アーテ

https (保護された通信) だと、jQuery などが動作しないことがあります。 記述をチェックしてみてください。 例：<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script> で記述していた場合、https 通信下では jQuery 本体がブロックされて反映されません。 上記は jQuery ですが、同じ状況かつ記述だと CSS も反映されません。 [ 対処法 ] <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script> と、// から記述すれば解決します。 ちなみに、 ◪ src=”https〜” で記述した場合 http、https、のページのどちらとも

こんなふうに子要素が親要素からはみ出すデザインにしたいけれど、親要素の幅が指定されていて出来ないということがあると思います。 今回はそんなデザインを可能にするcssの書き方についてです。 HTML 親要素が邪魔なら子要素を親要素の外に出してしまえば解決できるんじゃないか？ と思うかも知れませんが、構造上そうもいかない時があるのです。 以下のhtmlを見てください。 #contに幅が設定されていると考えてください。 この状態のまま、#innerをはみ出させることができます。 <div id="cont"> <div id="inner"></div> </div>

ホームページを使って集客・PRするためには、見やすく美しい装飾が必要です。 ホームページを美しく装飾するためには、CSSのスキル・デザインツールなどを使用します。 「CSSの使い方があんまりわからない..」や「どんなデザインツールを使えばよいのかわからない」という人もいるでしょう。 今回は、そのような悩みを抱えている人のためにCSSのツールやデザインツールなどを紹介します。 ホームページを制作・リニューアルしたい人は、ぜひ参考にしてください。 CSSツール まずはCSSのツールから紹介します。 CSS3 Generator カラー設定・色合いなどを簡単に調整できるCSSツールです。 完成したイメージを見ながら調整できるのが、便利なポイント。 制作したCSSコードは、コピーして貼り付けるだけで使えます。 制作したコードは、WEBブラウザはもちろん、Android・iOSなどにも使用可能です。

Optimized for UI like font, background, border, etc.

Introducing CSSgram: A CSS Library for Instagram Filters Published on October 25, 2015

Tool that can convert any image into a pure CSS image.

Webサイト制作において、大切なのがデザインです。 デザインによってPV数などが大きく変動します。 ターゲットとなるユーザーの属性やサイトを運営する目的によって最適なWebサイトのデザインが違います。 金融機関などのホームページは誠実や信頼をアピールするために、重厚感のあるデザインです。 IT企業やベンチャー企業などは、遊び心のある奇抜なデザインを採用している会社もあります。 今回は、様々なWebサイトデザインとデザインで役に立つツールを紹介します。 「変わったWebサイトのデザインを知りたい」、「Webサイトのデザインで役に立つツールを知りたい」という人は、ぜひ参考にしてください。 参考になるデザインまとめサイト 参考になるWebサイトデザインまとめているサイトを紹介します。 「とにかく色々なデザインを見たい」という人はこのようなサイトから置きにするのデザインを探してみてください。 MU

Web制作において見た目の美しさや使いやすさも大切ですが、ユーザーのストレスを軽減することも重要です。 ユーザーがWebサイトを閲覧したときに、ストレスを強く感じるのは、Webサイトが表示されるまでの時間になります。 表示スピードが遅いだけで、Webサイトから離脱するユーザーは少なくありません。 Googleの検索アルゴリズムにも、表示スピードを評価の対象にしていることを公式発表しています。 つまり、表示スピードが遅いことで、ユーザーの離脱率も上がり、SEOの観点からもよくありません。 Webサイトの表示スピードを速くする手段として、有効なのが画像圧縮です。 画像処理には時間がかかるため、画像圧縮をすることで飛躍的に表示スピードを上げることができます。 今回は、プロの現場でも使用されている画像圧縮できるツールを紹介します。 圧縮について 圧縮とは容量（ファイルサイズ）を削減することです。

こんにちは、カクシンのアートディレクターのまきこです。アイドル集団「ハロー！プロジェクト」では賛否両論の新体制がはじまりましたが、わたしは変わらず大好きです！ さて、みなさんは、 「Sketch」というデザインツール を使ったことがありますか？ 今回、オンライン動画学習サービス “Udemy” で人気の「Webやアプリの最新デザインツール Sketch3」という動画講座をPRするため、初めてSketchを使うことになったのです。しかし、SketchってWebデザインの現場だとちょっとマイナー。Photoshopと何が違うのかもよくわからない……。 だけど実際に使ってみると、作業がものすごーく早くなったし、 だったんですよ！ 実際に受講した動画講座の内容に沿って、その魅力を紹介しますね！ そもそも「Sketch」って？ Sketchは、アプリやWebサイトのUIデザインに特化したツール。ペー

子要素を親要素の左右の中央寄せに配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置 単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置 「position

Webデザインやスマホアプリに使用されるグラデーションも最近では進化しています。一昔前までは、パステル系のグラデーションが人気でしたが、最近では2色を使用した鮮やかなグラデーションや同一色相のグラデーションが注目されています。 UIデザインのコンポーネントや背景にぴったりな美しいグラデーションを作成できる無料ツール・無料素材を紹介します。

ドメインを移転するときには、301リダイレクトを使うのが鉄則です。 しかし、何らかの事情で301リダイレクトが使えないときは、どうしたらいいのでしょう。 301の代替手段として使えるのは、meta refreshです。 meta refreshは、指定した秒数が経過した後、指定したURLへ自動転送することができるHTMLコードで、headセクションに次のように記述します。 <meta http-equiv="refresh" content="●;URL=http://..."> ※「●」は秒数 検索エンジンは、指定する秒数を「0」秒にすることで、301リダイレクトとして処理してくれるようです。 Yahoo!は、インフォセンターで以下のように説明しています。 ●には、転送元から転送先にリダイレクトする場合に要する時間を秒数で記述します。この値を「0」とした場合、YSTは301リダイレクト（

SEOやWebマーケティングの悩みがありましたら、お気軽にナイルの無料相談をご利用ください！資料では、ナイルのSEO支援実績（事例）、コンサルティングの方針や進め方、費用の目安といった情報をご紹介しています。あわせてご覧ください。 サービス資料をダウンロードする 無料でナイルに相談する 「ナイルのSEO相談室」は業界歴15年超のナイルが運営しているメディアです。SEOの最新情報を随時発信しているので、ぜひブックマークしてください！ またSEOにお悩みの方は無料相談やSEOコンサルティングサービスのご利用もぜひご検討ください！ リダイレクトする理由 SEO対策をしていく上で、リダイレクト（転送）という言葉を聞いたことがあるかと思います。まずは実際にどういった場合にリダイレクトを行うかをおさらいしましょう。リダイレクトを行うのは例えば以下のような場合です。 WebサイトのURLを変更した場合

Clear Cacheとは Clear CacheはChromeの拡張機能で、ブラウザにクリアボタンが追加され、ボタンをクリックするだけでChromeに保存された様々なデータのクリア（消去）をコントロールすることができます。 Clear Cacheをインストールする Chromeウェブストアで、Clear Cacheのページを開き、[CHROMEに追加]をクリックします。 ※ 画像クリックで拡大表示します。 『「Clear Cache」を追加しますか？』のダイアログが表示されたら。[拡張機能を追加]をクリックします。 インストールが完了すると、ブラウザの右上にアイコンが追加されます。 Clear Cacheのメニュー 追加されたClear Cacheのボタンを右クリックすると下の図のようなメニューが表示されます。 メニューの内容 Clear Cacheについてで、クリックするとChrome

デザイナーの仕事は、成果物に対するデザインだけではありません。デザイン制作をしたら、「なぜそのデザインなのか」をステークホルダーに説明し、コンセンサスを取る必要があります。 デザイナーがカバーする領域も広がる中、私たちデザイナーはどのようにデザインを共有するべきでしょうか？ 今回は、UX MILKチームがどのように情報共有を行っているかを紹介します。 デザインドキュメントをどのように共有すべきか デザインドキュメントには、ワイヤーフレームやプロトタイプ、ビジュアルデザインなどさまざまなものがあります。 プロジェクトが進むにつれ、デザインドキュメントは増え、また変更が加えられていきます。すると、これらをどのように保存・整理し、共有するかという問題が出てきます。 UX MILKチームでは、こういった問題を解決するために、DocBaseを使ったデザインの共有を行っています。 なぜDocBaseで

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

テクスチャ素材はWebデザインはもちろん、グラフィックデザインなどあらゆるシーンで便利です。 最近では重ねるだけで手軽に印象をアップできるものなど新しいスタイルのテクスチャもどんどん増えてきており、取り入れるだけでデザインをぐっと良くしてくれるのでデザインに携わる機会があれば是非活用したいアイテムです。 今回は、photoshop無料テクスチャを50個厳選してご紹介します。 トレンドになっているポリゴンスタイルから、アートワークに重ねられる質感系テクスチャといった使いやすいものばかりです。 いずれも無料ですので気に入ったものがあれば是非デザインに取り入れてみてください。 photoshop無料テクスチャまとめ 1.3 Wood Panel Textures http://www.photoshoptutorials.ws/downloads/textures-downloads/free-

Hey I'm Matt, please choose your way to credit my work: Credit with HTML link Share link on social Buy me a coffee Learn about attribution How to use Learn where to place the CSS code: Demo License summary By obtaining and using graphics from SVGBackgrounds.com, you agree to the terms of the SVGBackgrounds.com License Agreement You can use graphics in personal or commercial projects You cannot use

こんにちは、Wantedly ユーザーグロースチームの竹野です。普段はウェブやAPIに絡めた改善を色々やっています。今日は、4月に行ったメールの改善施策で得た知見を共有します。 背景メールはユーザーにリーチできる手段の一つです。 Wantedly でもメールを送っていますが、改善前のメールは比較的昔に作ったものが多く、大きく分けて3つの課題がありました。 1. テンプレートが横幅600px固定なのでモバイルで見ると縮小されてしまってそもそも読めない 2. メールの見た目に統一感がない（デザイン面での課題） 3. 可読性や再利用性が低く開発効率が良くない（エンジニアリング面での課題） これを解決するために、まず現実的にメールでレスポンシブにする方法を調査した上で、既存のメールを洗い出し、デザイナーの方にデザインを依頼し、自分の方でコーディングを行いました。コーディングの際は、将来的なことも考