Font Awesomeのアイコンを日本語でサクっと検索できるようにしました。 PhotoshopやイラレでもFont Awesomeのアイコンを使いたい方は、表示されたアイコンをコピペして使えます。 アイコン名を日本語で検索 おすすめキーワード 以下のキーワードで検索をすると、それ系のアイコンのみが表示されます。 「矢印系」「手系」「交通系」「ファイル系」「スピナー系」「フォーム系」「グラフ系」 「支払系」「通貨系」「エディタ系」「プレイヤー系」「ジェンダー系」「ブランド系」「医療系」

UI Designer名古屋でUIデザイナをしています。 UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントエンドの実装して作りんで行くのが得意です。 最近はStorybookを運用したデザインシステムを作るのに感心があります。 コーギーと暮らしています。

Chances are that however busy you are, Keith Rabois is busier. He’s an active investor as a general partner at Founders Fund, the early-stage outfit co-founded 18 years ago by Peter Thiel. He&#8

お申込みフォームや、商品購入フォーム、会員登録フォームのCV改善を行うために色々施策を行ってまいりましたが、より効果の出た結果をまとめて説明したいと思います。 今回は文章で説明するだけではなくサンプルコード、サンプルフォーム、サンプルデータも用意しましたので、是非参考にフォーム改修を行ってみてください。 ダッシュで用意したんでソースくっそ汚いのはご容赦ください^^; もしお試しいただいて不具合あればご指摘いただけると幸いです。 ページ離脱時にポップアップ(アラート)で離脱を食い止める これはご存知の方もけっこういらっしゃるかもしれません。 ページを閉じるボタン、もしくは他ページに遷移する際にアラートポップアップ(アラート)で警告をする方法です。 ユーザーからすると「ウザっ！」と思われてしまう仕様ですが、離脱される前の最後の抑止力となる事は間違いありません。

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス　林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT

地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr

1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる なぜ、スマホ未対応のホームページは時代遅れなの？ その答えは非常にシンプル。 なぜなら、今が「ほとんどの人がPCではなくスマホでホームページを見ている時代」だからです。 この数字が何を表しているかご存知でしょうか？ スマホ： 83.4% パソコン： 69.1% これは、「総務省」が発表した2019年のIT機器の世帯保有率です。（詳しいデータはこちら） なんと、パソコンよりスマホを持つ人のほうがはるかに多いんですね！ こんな世の中ですから、よりたくさんの人にホームページを見てもらいたいなら、スマホサイト

CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ

HTMLとかCSS ひよこちゃん向けシリーズ、【float】編です！CSSの【float】について本気出して説明してみた。left right ,clearってなに！？？ HTMLとかCSSとかこれから！な、ひよこちゃん向けシリーズ、【float】編です！ 2016/07/15 一番最後のほうにfloat clearfixの修正版追加しました。 float(フロート)とはなんぞや？ floatとは、要素（<div>とか<p>とか）を右に寄せたり、左に寄せたりするときに使います。 よくサイトで見られるサイドバーとかサイドメニューとかもfloatで配置することが多いですね。 まずは、プロパティをおさらいしておきましょう！ left 【左に寄せる】 right 【右に寄せる】 none 【やっぱフロートやめる】 inherit 【継承させる】←使うことあまりない プロパティは以上です。基本的にi

float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま

皆さんはお気に入りデザインの管理をどうやっていますか？ はじめまして！ 14新卒デザイナーとして面白法人カヤックに入社しました、トダエミです。 ソーシャルゲームチームでデザイン修行しながら、写真撮ったり絵を描いたりしています。 今回は、新卒デザイナーにとって関門の一つデザインの引き出しを増やせ！ を攻略するための方法として、 デザインスクラップツールの紹介をします！ 1.デスクトップ系ツール バナーもボタンもキャプチャも、これ一つ！「Spark Box」 >> http://www.icyblaze.com/sparkbox/ （対応：mac） UIやバナーなど単体のものをストックするのに大活躍！ 私はソーシャルゲームのバナーをストックするのに使っています。 サイトに使われている画像が一覧で表示され、一つずつまたはすべてライブラリに読み込めます。 魅力的なのはソート機能！ なんと自動でカラ

AppleがWindows版Safariの開発を終了してから、しばし経ちます。 「WindowsでSafariとか使わんだろう～」という方もいるかと思いますが、私はスマホ制作するときに今だによく利用してます。 Firefoxも使うんですけど、FirefoxのみでPCの表示を見てスマホの画面に切り替えて…とちまちまやるのが面倒なので、Safariで大体のスマホ表示を確認しつつ、FirefoxでPCの表示を確認して…とやってます。 （他のシュミレーターは重かったりすると面倒なので利用してません。。） なんやかんやありますが、結局最近はwindows版Safariは使用しなくなりました。 いろいろ仕方ないですね。 AppleもWindows版Safariのダウンロードリンクを削除して、今は別のとこからしかダウンロードできません。 ただ、今だに使用してる人多いのか？意外とwindows版Safar

広告バナーって「ひとつや2つくらいすぐできるだろう」と思っていても案外時間がかかってしまいますよね。 Webサイト制作と同じように配色やレイアウトなどの一つひとつに迷ってしまう方も多いと思います。 仕事ですぐに使えるAdobe Photoshopデザイン実践講座【オンライン受講可】 実は私も最近までバナーを制作するのに2時間以上かかっていました。しかし「どうすれば速く簡単にバナーを作るのか」を繰り返し試行錯誤する中でやっと見つけたのがこの方法です。この方法を身につければ誰でも1時間足らずで効果の高いバナーを量産することができると思います。 各制作ステップの見出しの横に実際にその作業にかかった時間も記載していますので、これをひとつの制作時間の目安として参考にしてください。 またこれまでに公開しているバナーの基本ルールやレイアウトの記事も紹介しておりますので、そちらも合わせてご覧いただけるとバ

2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。

Web コーディングや Web系全般のTips デザイン デザインのノウハウや 便利な素材紹介など アート 好きな画家や 展示会についての情報 生活 暮らしから得た知識や 妊娠、出産、育児について