すべてのカテゴリ

PCでスマホの表示を確認する方法をご紹介！今回も画像たっぷりでお届けします！ブラウザはGoogle Chromeでご紹介します。Windowsは「右クリック→検証」もしくは、「F12」ボタンを押す。Macはcontrol押しながらクリック→検証をクリックします。▼そしたらこのように検証画面（コードとか描いてあるところ）が右とか下とかに出るはず。検証画面にある、スマホタブレットみたいなアイコンをクリック（ピンクの四角で囲ってるやつ）▼すると今度は画面の大きさの数字などが表示されるDimensionsタブからデバイスを選んでもいいし、その右の幅のところに直接数値を入れてもOK。今回は直接400と入れてみます。そして画面をリロードします。（WindowsはControl+R、Macはcommand+R）▼幅400pxの時のスマホの見栄えが表示されました。これでPCでもスマホの表示が確認できますね♪実機・実際のスマホやタブレットで表示が確認出来ればベストだけれど、どうしても出来ない時は上記の方法はいかがでしょうか。最後までお読みいただきありがとうございます。これからもこのようにちょっとした豆知識を配信して参ります。♡いただけたら励みになります。😊

Webサイトの制作にあたっては、いろいろなサイトを参考にされると思います。その際に作業効率を上げる為にはブラウザーの用途に合った拡張機能を利用されることをお勧めします。今回は、ホームページ制作を行う上で使える「Google Chrome」の便利な拡張機能をご紹介します。ブラウザーは「Google」及び「Brave」で拡張機能が使用できます。いずれも「chromeウェブストア」から簡単に追加できます。1.「GoFullPage-Full Page Screen Capture」Webサイトのページ全体のスクリーンショットを取得することができます。最近のホームページは、LP型の縦長構成のサイトが多いので重宝します。そのままコピーして「Figma(フィグマ)」などデザインプラットフォームに張り付けてサイト作成、編集にも活用できます。 ▼「ココナラ」ページのスクリーンショットの場合2.ウェブページ全体をスクリーンショット-FireShotサイトのページ全体、表示部分、選択範囲とそれぞれキャプチャーメニューからスクリーンショットを選択でき、さまざまな形式で保存することが出来るツールです。3.「UI Build Assistant」画面上の全ての「HTML要素」に背景色とアウトラインをつけてくれる拡張機能です。▼「ココナラ」のページをサンプルにすると▼ページを表示した状態で「UI Build Assistant」をクリックすると　　　　　　　　　　　　　　　　　⇩上の図のように各要素の幅の取り方、マージンの取り方などが一目瞭然で確認できます。4.「ColorPick Eyedropper」

Webページのカラーコード「RGB」とは 光の三原色の事でレッド・グリーン・ブルーの頭文字を組み合わせたものです。主にコンピューターのディスプレイやTVディスプレイで使われます。 Web制作をする時のカラーコードは色を＃の後に6桁の数字とアルファベッドで指定されているコードで表現されています。例えば黒が＃000000、白が＃ffffffですね。 これらはカラーをプログラムで表示するために、「RGB」を２桁の16進数に変化し、連結して表示したものになります。 「CMYK」とは 色の三原色のことでシアン・マゼンタ・イエロー・キープレート（黒色を表現するもの）の頭文字を組み合わせて、これらを混ぜ合わせることにより、色を表現しています。これは主に紙媒体で使用されプリンターで印刷する際に表現されます。 まとめるとWeb上にカラーを表現する場合は「RGB」を使用し、印刷物で表現する場合は「CMYK」を使います。 Webページから気になるカラーコードを確認する方法 参考になるサイトを見ていて、色使いや配色方法が気になることがあると思います。そんな時、簡単にカラーコードを取得できる方法を今回ご紹介します。 「Google Chrome」の拡張ツール「ColorZilla(カラージラ)」を使うとその色のカラーコードを取得出来ます。 ▼「ColorZilla(カラージラ)」のインストール方法※「Google Chrome」を使用していることが前提となります。①「chromeウェブストア」からインストールします。「ColorZilla(カラージラ)」のインストール画面から「chromeに追加」をクリ