WebデザイナーのためのSublime Text入門

ColorPickerを使ってみよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
カラーのコードを直感的に入力できるパッケージをご紹介します。
講師:
04:15

字幕

このレッスンではSublime Text のパッケージ、ColorPicker を導入してみましょう。ウェブデザインにおいて色を選ぶのは大変です。また、色がハッシュで始まる16進数だったりすると覚えたりコピペするのが大変です。これを直感的に選べるようにするパッケージがColorPicker です。それではまず begin の HTML をChrome で、そして同じファイルをSublime Text で開きます。開いたらこのように並べておいてブラウザーの指示に従ってパッケージを導入していきましょう。それでは Sublime Text を選びコマンドプロンプトを開きます。Mac は Command+Shift+PWindows は Ctrl+Shift+P です。そしてパッケージをインストールするのでinstall という単語を打ち込み、Package Control: Install という項目を選んであげます。少し待つとパッケージの一覧が出てくるのでこちらで ColorPicker と全部を入力してあげてください。実は似ている名前のColorPick というのもあるのでColorPicker と入力してあげます。 そしてこちらを Enter でインストールをして行きましょう。インストールが完了しました。それではこちらの index.html にはスタイルシートが埋め込まれています。このスタイルシートにはまだ色の設定がところどころ抜けています。まず background の位置にカーソルを合わせてみましょう。ここでショートカット、Mac は Command+Shift+CWindows ではCtrl+Shift+C と押すとこのようにカラーピッカーが現れます。これは OS 標準の色を選ぶツールが出るはずです。Windows ではちょっと見た目が違いますが色が選べる画面が出ていると思います。Mac の場合はこの上のインターフェイスをクリックする事で色味を選ぶスライダーを出すことができますが使いやすいのはこのサークル状のものだと思います。例えばこの中から明度を上げたり下げたり、色相を選んだりして Pick と押すと今選んだ色味がこのように入ったと思います。上書き保存をしてブラウザーにフォーカスして更新をすると、このように色が入ったと思います。また、この h3 の見出しの色も選びたいということであればcolor のセレクターの中にカーソルを置いてショートカットキーを押すと、やはりカラーピッカーが出るので色をまた選ぶことができます。 そして Pick を押すと色が入って保存をしてブラウザーを更新する、と。同様に p の文字色も変えてみたいということでcolor の所にカーソルを置いてCommand+Shift+CWindows はShift+Control+Cこちらで色味をまた好きな色を選んでみる、と。そして Pick を押すとこのように色を入れることができます。上書き保存、そしてブラウザーで更新です。こちらに頼りすぎると、使う色が増えてしまうので最初に基準となる色を選んだらコピー&ペーストの上使うのがお勧めです。ですがこのように直感的に色を選べるというのは非常に便利なのでぜひ導入してみてください。このレッスンではColorPicker の導入を学びました。

WebデザイナーのためのSublime Text入門

Sublime Textは世界中で多くのプログラマーに愛されている大人気のテキストエディタです。このコースでは、Sublime Textを使うのが初めての方にもわかりやすいようにその使い方を丁寧に解説していきます。コースの後半では実際にSublime Textを使ってコーティングを行っていきます。

2時間16分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年06月18日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。