FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時） | 株式会社ウェブ企画パートナーズ
400なのか900なのかは表示したいアイコンによって指定が異なりますので注意が必要です。 Twitterアイコンですと、Brands（つまりfont-weight: 400;）のみの提供。 RSSアイコンの場合は、Solid（つまりfont-weight: 900;）と、RegularとLightの３種類があります。 スタイルについては、赤枠部分で確認してください。（提供スタイルが１種類しか無い場合は右側の選択肢は表示されず） 原因その５：バックスラッシュを付けていない ３回目の登場ですが、再びCSSです。 .icon::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; /*←ココ！！！！！！！*/ } contentにUnicodeを記載して呼び出したいアイコンを指定するのです
【2021 最新版】ノンデザイナーだからこそ知っておきたかった10のイラストサイト - Qiita
みなさん、こんちには 【watnowテックカレンダーの23日目】 今日はwatnowのしゅいが担当します よろしくお願いします はじめに 今回は普段私が資料作りなどの際に利用している デザインの参考サイト,フリーのイラストサイト,配色のサイトを紹介します 今回紹介するサイトは全て無料で利用できます デザイン参考 1,pinterest URL:https://www.pinterest.jp ピンタレストは画像のSNSのようなものでネット上の画像を自分の「ボード」に 「ピン」して集めたりできる画像をブックマークとして集めるツールです パワポデザインなどと検索してデザインのアイデアを見つけたりして マネして作ってみるのもありです 2,dribbble URL:https://dribbble.com/ dribbbleはアメリカで生まれたサービスで、招待された人しか画像の投稿ができないため
CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説 | 侍エンジニアブログ
こんな感じで、好きな画像を指定することができます。オールドブラウザでも問題なく動作するので、ブラウザのバージョンなどを気にせず使うことができます。 background-imageの使い方 では早速background-imageの使い方を見ていきましょう。以降の説明では、下記のHTMLとCSSを基本に進めていきます。 HTML <div class="bg_test"> <div class="bg_test-text"> 背景画像を設定します </div> </div> CSS .bg_test-text { border: solid 1px; /* 枠線指定 */ display: inline-block; /* インラインブロックにする */ padding: 10px 20px; /* 余白指定 */ background-color: rgba(255, 255, 255,
ものが売れやすいホームページのサイズ、横幅的考え
ホームページのサイト幅についての記事がよく読まれています。 しかし上記あくまでホームページの基準の横幅です。 売れやすいサイトとはまったく関係ありません。 私がいろいろホームページを作る中でこの売れやすい横幅はこれなんじゃないかなーっていうのがあります。 BtoCのホームページなんて、ほぼスマホからの閲覧ですから、実際には売れる横幅を考えるよりも、スマホのサイト設計を先にしてしまったほうが良いんですけどね。 売れやすいホームページの横幅は従来のサイト960pxまで理由は記事の読みやすさにあります。 横に広いサイトを持つと、どうしても、ブログ記事を作った時に横に伸びすぎます。 人間が読みやすい横のテキストの長さは35文字〜40文字程度です。ここからさらに横に伸びると読みにくさを感じてしまいます。 ところが、960pxのホームページなら、サイドバーをおいて考えると、テキストの長さがちょうど良く
最近のホームページの横幅は？世界基準に合わせてみよう
WEBデザイナーの皆様こんにちは。 今日はホームページの横幅について書きます。 みなさん、WEBサイトを設計するとき、横幅って何ピクセルぐらいにしていますか？ グリッドシステムを使って、960pxにしてる人は多いと思うのですが、もうグリッドっていう概念が、最近ありませんよね。 グリッドを使えば確かに楽、、、だけど、例えば、サイドバーをつけた２カラムにしたときの違和感は否めない、、、みたいな感じ。 ということで、私ももう、グリッドの観念は捨てるようにしています。 最近１カラムばっかりですしね。 最近のWEBサイトの横幅は？実は、最近のWEBサイトの傾向でいくと、横幅は1050px以上が圧倒的です。 それどころか、横幅という概念がないサイトも増えました。 こんな感じです。↓クリック 横幅の概念がない。これからはそういう時代です。 レスポンシブの考え方だとそうなりますよね。ブラウザサイズに自動的
Webデザインカンプのアートボードサイズ何pxにしたらいい？｜Gita（ジータ）
Webデザインにおいてカンプを作成する際、アートボードの横幅は何pxにしたらいいのか。基準となる考え方とPhotoshopでのアートボード機能の使い方をご紹介したいと思います。 ■ アートボードとは現実の手描き絵画に例えると、絵を描くキャンバスのようなものです。絵を描いて印刷や書き出しで出力される範囲（領域）がアートボードになります。Illustratorには以前からあった機能ですが、CCになってからPhotoshopにも追加されました。 ■ カンバスとどう違うの？Photoshopに従来からある、同じく絵を描く範囲であるカンバス。アートボードとカンバスがどう違うのかというと、正直分かりません（笑）しかし、カンバスではできない、アートボード特有の機能が多くありとても便利なため、Webデザインの現場ではアートボード機能を利用します。 ■ アートボードのメリット◉ 1つのデータに複数のアートボ
WebサイトのWidth(横幅)について ~業界毎の主要webサイト調査結果~ | Webコンサルティング・Web制作会社 SERENDEC/セレンデック
Web業界、Web制作技術、Webデザインのトレンド変わるスピードは早いです。 Web業界では常に新しい情報が飛び交い、それを使用するかしないかによってユーザーへの訴求にも変化が出るため、常に新しい情報に適応していくことが大切です。 今回はそんなWeb制作のトレンドに関して、「レイアウトのWidth（横幅）」に絞ってご紹介します。 Webサイトを作成するときに、レイアウトのWidthを設定するのに悩んだ経験がある方も多いのではないでしょうか。 最近のWebサイトレイアウトのWidthを調査し、どのくらいの幅に設定するのが良いのか考えてみました。 WebサイトのWidth（横幅）の定義Widthとは、Webサイトを作成する際に設定する要素の横幅のことを言います。 画像やタグなどあらゆるものの横幅を「Width」で設定します。 今回は、Webサイトの表示ページのWidthについて調査しました。
【2020年版】Webデザイナーが覚えておきたいWebデザインの横幅サイズを解説！ | ELEMENT, INC.
Webサイトのデザインをする時に、どのサイズで作成すればいいか迷うことがありますよね。最近はスマートフォンのサイズにも対応したレスポンシブのサイトでなければいけません。 今回はパソコンとスマートフォンのそれぞれのWebサイトの適切なサイズについて解説をしていきます。これからWebサイトのデザインをする人は是非参考にしてみてください。 Webサイトのサイズを知ることから始める Webサイトのデザインを行うには、適正なサイズを知ることから始まります。適当な大きさでは上手く画面に表示ができないこともあります。現在ではスマートフォンが普及しているので、スマートフォンのサイズに合ったレスポンシブデザインも必要です。 Webデザイナーとして仕事をしていく上で、まずサイズを正確に知ることが大切です。 日本のパソコンとスマートフォンのサイズ(解像度) 日本で使われているパソコンやスマートフォンのサイズはど
30 Examples of Material Design Palette Color Usage
Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents
デザイン作成が無料で驚くほど簡単に – Canva
ブラウザを更新してください ご使用のブラウザが古いかサポート対象外の可能性があります。Canvaで引き続き続行するには、次のいずれかの最新バージョンのブラウザに更新してください：
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
2020年、注目されているWebデザインの最新トレンドと技術の進化
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ
さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ
.alpha .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.2666666667em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s, color 0.2s} .alpha .btn:hover{box
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
【モバイルアプリでインタラクションを高める！】直感的なデザインを作成するための７つのヒント集
モバイルアプリは、いつでもどこでも効果的に使用できるように、操作がはっきりしていることが期待されています。 デザイナーの仕事は、アプリ内のユーザーが問題なく機能を操作するのを手助けする直感的なインターフェイスを作成することです。 この記事では、効果的なモバイルインタラクションシステムの重要な側面と、デザイナーが直感的なデザインを作成するためのヒントを説明します。 1.学習能力を高める すべてのデザイナーはオリジナルのインタラクションとナビゲーションシステムを備えたユニークな製品を作りたいと考えています。しかし、新しい環境を作成するには、ユーザーがどのようにそれに適応するか考える必要があります。 モバイルアプリケーションの対話システムにロジックや連続性がない場合、またはターゲットオーディエンスのニーズに対応していない場合は、イライラするかもしれません。その状態はUXにとっては重要なことなので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLを知らなかった四十路女がwebデザイナーとしてフリーランスになったわけ | ホームページ制作所 Zelva-web
【サイト制作】WEBサイトのベストな横幅は？改めてPCのブラウザ（解像度）を考える。
HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）
無料デザインツールCanvaとは？できることを解説
