サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
rico-notes.com
アセットは便利って聞くけど「そもそもアセットって何?」「XDってどうやって使うの?」 そんな疑問にお答えします。 Adobe XDを使えば、ワイヤーやラフデザインをサクサク作れますが「アセット」を使えば、爆速で作れるようになります。 初心者の方にもわかりやすく画像付きで丁寧に解説しますので、スグに自分の制作で使えるようになります。 それでは早速はじめましょう! そもそもAdobe XDで使えるアセットって何なの? 何度でも使い回しできる、色やデザインパーツのことです。 こんな時ありませんか? あの時作ったボタンのデザイン使い回したいなぁ それをめちゃくちゃ簡単に実現してくれるのがアセットです。 Adobe XDのアセットの使い方 まだAdobe XDをインストールしていない方は、別記事でインストール手順を紹介しているので、そちらをご覧ください。もちろん無料(期限無し)で使えますので料金は掛
この記事では、ここ数年WEBデザインで引っ張りだこの「アイソメトリック」のイラストを無料でダウンロードできるサイトを12こ紹介します。 アイソメトリックのイラストとは立体的なイラストを描く図法で、ここ数年のWEBデザインで爆発的な人気を誇るイラストです。 次の画像のようなイラストをアイソメトリックのイラストと表現されます。 それではアイソメトリックのイラストを無料でダウンロードできる12サイトを紹介していきます。 Freepik(フリーピック)引用:Freepik めちゃくちゃクオリティーの高いイラストが無料でダウンロードできます。 イラストのクオリティー、素材の数において圧倒的なサイトです。 素材探しをする際、気づかず誰もが一度は訪れているであろう、非常に人気のあるサイトです。 嬉しいのが、登録不要でダウンロードできるところ ただし、未ログインだと1日3つまでしかダウンロード出来きません
Visual Studio Code 通称「VSCode」で、Sass(Scss)を自動でコンパイルしてCSSに変換する方法をご紹介します。 セーブするたび自動でコンパイルしてくれるので非常に楽です。 すでに「VSCode」はインストール済みという前提で手順を紹介していきます。 まだインストールしてないよ!という方は、下記リンクよりインストールしてください。 Sass(Scss)の自動コンパイルに使用するプラグイン・Live Sass Compiler ひとつプラグインを入れるだけで、自動でコンパイルできるようになるとは、、 VSCodeめちゃくちゃ便利ですね。 Live Sass Compilerのインストールから設定まで全ての手順1.Live Sass CompilerをVSCodeに追加する画面左、黄色の点線のボタンをクリック。 Extension(プラグイン)の一覧が表示されるので
この記事では Webフォント「Noto sans JP」をサイトに設定して公開するまでの、全ての手順を画像付きで解説します。 CDN経由での導入がメインですが、ダウンロードして使う方法も補足で記載します。 ここからイントロ文章を挟みますが すぐに手順がしりたい! っという方は 読み飛ばして、事項の「主な手順」から確認してください。 ウェブサイトを制作する上で、どうしても頭を悩ませるのが「Font(フォント)」の問題。 OS(MacやWindowsなど)によって、フォントがかわりデザインがしょぼくなる、、 可読性が悪くなる、、 デザインカンプと違いませんか?とクライアントに言われる事も、、 フォントを統一したいが 日本語のwebフォントは重い、遅い。 英語と比べて ひらがな、カタカナ、漢字、etc、、、 文字数が圧倒的に多くファイルサイズは何倍にもなります。 そこで、従来はサブセット化(よく
ヘッダーの領域を分かり易くするために、ヘッダーの背景に白(#ffffff)、ボディーの背景にグレー(#e6e6e6)をCSSで設定しています。 どこで書いているかはCSSを書き込む項で出てきます。 ちなみに、背景色を透明にすればダイナミック全画面デザインのファーストビューにも良くマッチします。 ほんの少しの手間でこういうデザインが作れます。 こちらも、記事後半で全コード紹介します。 それでは早速解説していきます。 まずHTMLでヘッダーをコーディングまずheaderタグを書きますhtml5で推奨されている、ヘッダーであること示す「headerタグ」を書きます。 <header> ここにタイトルやナビメニューを書きます </header> h1タグを使ってサイト名を表示ヘッダーの左側に配置する、サイト名をh1タグで囲みます。 タイトルを押すと、サイトのTOPページに遷移するように、h1の中に
ハンバーガーメニューをタップすると、SPナビゲーションが表示する仕組みは「jQuery」を使って実装します。 初学者の方や、これからウェブデザインを始める方にとって、難しいかもしれませんが、わずか数行ですので諦めずにチャレンジしてみてください。 細切れにソースを見るのが面倒は人は、記事後半に全ソース載せてるので、そちらをご覧ください。 それではいきましょう スマホサイズでPCメニューを非表示にするメディアクエリでブレイクポイントを設定するいきなり難しい言葉が出てきましたが、心配いりません。 ブラウザの横幅が「何ピクセル以下」になったら「スマホ用のCSS」が効くようにするかを決めているだけです。 今回は、ブラウザの横幅が「640px以下」の時に、スマホ用のCSSを効くようにしたいので、次のように指定します。 コードは、前回記事の後半に記載してあるCSSの続きから書いてください。 @media
このページを最初にブックマークしてみませんか?
『rico-notes.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く