ホームページ制作

2018年4月

Chromeの検証機能(デベロッパーツール)起動方法と使い方

 

皆さんこんにちは!

今回はChromeの検証機能(デベロッパーツール)の起動方法と軽く使い方を紹介します。

ホームページ制作者以外の方には馴染みがないと思いますが、知っているとホームページを修正する時や仕組みを理解するのに便利です。

私のみならずホームページ制作者は結構多い頻度で使用しています。

 

デベロッパーツールとは

ChromeはWEB制作に欠かせない機能になっています。

・コードの確認をする

・デザインの変更をテストする

・様々な画面サイズで表示のされ方を確認する

・エラーやログを確認する

など様々な使い方ができます。

CSS(デザインを決めるファイル)の変更やコードの入れ替えなど直感的な操作が可能で、とても便利です。

 

デベロッパーツールの起動方法

まず、デベロッパーツールの表示方法です。

①ページ上で「右クリック」

 

②「検証」をクリック

 

③起動されました!!

 

アドレスバー横の設定から表示させることも可能です!

 

ショートカットキーもあります。

macなら「⌘(command)+ opt + I」Windowsなら「F12」で起動が可能です。

 

デベロッパーツールの簡単な使い方

様々な機能があり全てをご紹介できません。

ちょっとだけデザインを変更する機能の紹介をするために、長さを変えてみましょう。

 

左下のをクリックして、カーソルを変更したいところまで持っていきクリックします。

 

デベロッパーツール画面が変わります。

 

右側のCSSを変更します。

適用されているCSSが表示されているので、変更したい長さ(width)は「100%」になっています。

 

変更するには、「100%」をクリックします。

 

今回は「80%」に変更します。

 

変更後、表示されてる画面このようになります。

このデザインは採用できないですが、、、

 

元の画面はこれです。

 

一目でデザインがどうなるのかわかりやすいですね。

長さだけではなく文字サイズを変えたり、色を変えたりなどホームページを修正するときのアイデアも湧きやすくなります。

表示されている画面だけが変わるので気にせずどんどん使ってください。

ぐちゃぐちゃになったら更新すれば元通りになります。

 

今回は少ししかご紹介できませんでしたが、面白い機能が沢山あるので一度試してみてください。

ご一読ありがとうございました!!

ホームページ制作~社屋外観写真をキレイに見せるためのひと手間~

 

こんにちは!

今回は少し違う題材です!

ホームページ制作サイドより、ホームページの印象を左右する「写真」をキレイに見せることができるように、ひと手間かけている作業をご紹介します。

 

皆様がホームページでまず目にするのがトップページなどの写真で、
最も重要な部分や、文章では伝えられない部分を視覚的に伝え、
ページの雰囲気も写真に左右されるということは納得のことと思います。

 

今ではスマホでいつでも簡単に撮れ、ホームページや印刷物などでも充分使用できるクオリティです。
実際にページ制作時に提出していただくこともありますが、その写真をそのまま手をかけずに使うことはほぼありません。
PCモニターで映えるよう修正を施し、ページのコンセプトによって色調を変えたりして実際に使用する写真が完成します。

 

ここから、撮影したものをホームページに載せるまでの作業工程、
弊社会社概要ページに載せる社屋の写真を例に、ひと手間をご紹介します。
撮影時は晴れ間もでていましたが、一瞬太陽が厚い雲に隠れて暗くなってしまい、ボツにしようかと思っておりました。

 

写真加工ツールのAdobe Photoshopで開き作業します。

 

①少し斜めになっている場合や遠近による左右にゆがみを真っすぐに直します

②電線などの不要物や壁面の汚れを除去

 

③建物を切り抜き黒い雲を明るく

 

④ページに合わせて色味やコントラスト、サイズを調整

 

などの加工を経て完成です。
会社紹介の背景が白いページに使用しますので、オーソドックスに見た目通りに仕上げました。

 

簡単に作業を説明しましたが、視覚的に伝えるには写真は必須のものとなります。

 

「デジカメ持ってないし、写真撮るのは無理」

「何枚かあるけど要らんもんが写ってるねん」

 

など素材をすべて用意していただくのは難しいかと思いますが
ページ制作・公開するにあたり、写真ひとつをとっても、より質の高いものとなるよう手をかけています。
オプションで写真撮影やデータの修正加工もお任せください。
プロカメラマンにお願いするより安く済みますし、色々なものに「使いまわし」もできますよ!

 

また次回、機会がありましたら色々ご紹介していきたいと思います。

 

過去ブログもご覧下さい!

 


TOP