画像サイズの変更

こんにちは。WEBディレクターのひよっこです。

今日は画像サイズの変更についてです。

HTML上で画像のサイズを変更する際は、<img src=“画像パス”  width=“数値” height=“数値”>のwidthとheightの数値を変更するのが正解です。
ただ、HTMLだけでなくCSSでも画像サイズを変更することができます。

むしろ、デザインなどの処理はHTMLファイルから切り離しておくべきという考え方があることからCSSの方に記述するのが一般的なんだとか。
HTMLで設定されたclass先にあるwidthとheightの数値を変更することで、画像サイズを変更できます。

HTMLにもCSSにもサイズの記述するのか?となんとなくもやもやしていたので少しだけ理解できました。

実機確認

こんにちは。Webディレクターのひよっこです。

今日は実機確認についてです。

PCでSP画面を確認する際はデベロッパーツールを活用すれば、簡単にチェックすることができます。
ただ、一時的にCSSが反映されているかなーと確認する程度にはいいのですが、やはり、実機での確認は必須になります。

PCで見たときには崩れていなかったような箇所が、実機で見たら全然崩れていることも稀にあるみたいです。

今までは、PCでチェックだけしてOK!と判断していたのですが、今後はきちんと実機でも確認せねば!と思いました。

CMS

こんにちは。WEBディレクターのひよっこです。

今日はCMSについてです。

よく耳にするCMS。お恥ずかしながら、意味をよく理解していませんでした…。

CMSとは「Contents Management System:コンテンツ・マネジメント・システム」の略でWebサイト内のテキストや画像、デザインレイアウトなどを一元的に管理するシステムのことをいうそうです。

つまり、Wordpressですよね。CMSの種類の一つがWordpressということが理解できていませんでした。反省です。

ちなみに、CMSのメリットとして他にはマルチデバイスへの対応が簡単であったり、サイト運用の分業がしやすいといったものがあるそうです。

 

ドラッグアンドドロップ

こんにちは。Webディレクターのひよっこです。

今日はWordpressのドラッグアンドドロップについてです。

WordPressには様々なプラグイン機能がありますが、「Intuitive Custom Post Order」というプラグインは組み込めば簡単にブログやお知らせなどの記事の順番を入れ替えることができます。

初めてこんな機能を入れることができるとしったのですが、便利ですよね。
カテゴリーを後から追加したりする際、順番を簡単にきれいに並び変えることができますから、私みたいな初心者でも簡単に編集できて便利でした。

 

画像の使い分け

こんにちは。WEBディレクターのひよっこです。

今日は画像の使い分けについてです。

画像ファイルの拡張子にはjpegやpngなどがありますが、それぞれにメリット・デメリットがあり、拡張子によって使い分けるのが望ましいようです。

jpegは色数が多い画像をきれいに表示することができる一方、編集、保存を行うたびに劣化してしまうため、何度も編集が必要な場合には不向きなんだそうです。

pngは色数を制限することができるため、色数の少ない画像を保存する際に適している一方、古いブラウザでは表示されない可能性があるんだそうです。

jpegとpng、何が違うのか知らなかったので、しれてよかったです!

パララックス効果

こんにちは。WEBディレクターのひよっこです。

今日はパララックス効果についてです。

社内のチャットを確認していると「パララックス効果」という言葉を見かけました。
「心理学にありそうな名前だなー」とか思いながら、全然想像がつかなかったので調べてみることに。

パララックスとは視差効果のことだそうです。じゃあ、視差効果って何かというと、立体感や奥行を演出することなんだそうです。

スクロールなどの動作に応じて、いくつかのレイヤーにある要素を異なるスピードで動かすことでそういった効果がうまれるんだそうです。

専門的なコードとか組み方とかはよくわからないのですが、こういう表現方法もあるのかと知れました。

再読み込み

こんにちは。WEBディレクターのひよっこです。

今日は再読み込みについてです。

はじめて知ったのですが、chromeの再読み込みには三種類あるのだとか。

1つめは一般的なF5キーで行える再読み込み。
2つ目は以前書いたキャッシュを削除したうえでの再読み込み。ctrl+F5でできます。
そして3つ目はキャッシュの削除とさらに、ハードの再読み込みもしてくれるものだそうです。

やり方はF12でデベロッパーツールを開き、ツールバーの再読み込みボタンの上で右クリック。
表示されるツールバーの中にある「このページを再読み込みします」ボタンをクリックするのだそうです。

サイトが崩れておかしい時はひとまず、このやり方を試してみます。

補完機能

こんいちは。WEBディレクターのひよっこです。

今日はHTMLエディタの補完機能についてです。

そもそも、HTMLエディタとは、Dream weaverのようなHTMLの編集に特化したテキストエディタのことだそうです。

HTMLを記述する際、開始タグと閉じたぐの両方を記述しなくてはいけません。ただ、すこしめんどくさいですし、閉じタグを書き忘れた、なんてミスを防ぐことができるのが自動補完機能です。

例えばpタグを入力する際には、<p></p>と記入しなくても、pを入力した後、tabキーを押すと、閉じタグまで自動で入力してくれるんです。

ついつい閉じタグを忘れてしまう私のような素人にはありがたい機能です。

 

メールアドレス暗号化

こんにちは。Webディレクターのひよっこです。

今日はメールアドレス暗号化についてです。

企業・団体のWebサイトにメールアドレスを掲載するリスクとして挙げられるのが、スパムメールです。

スパムメールを送付するような業者がメールアドレスを収集するために使っているのが、自動巡回プログラムだそうで、ネット上を巡回しメールアドレスを収集しているそうです。

このような、システムに収集されづらくするための方法が、メールアドレス暗号化です。巡回プログラムが認識しづらい形式に暗号化することで、スパムメールが送られてくる可能性を低くすることができます。

 

ファビコン

こんにちは。Webディレクターのひよっこです。

横文字の言葉にめっぽう弱いせいか、言葉から何か想像すらできず、検索を繰り返しております。その中で今日知った単語が「ファビコン」です。

ファビコン(favicon)とはフェイバリット・アイコン(favorite aicon)を縮約したものだそうで、ブラウザでWebページを開いたときに、アドレスバーやタブの左側に表示されるアイコンの事だそうです。

ちなみにファビコンの拡張子は「.ico」のため、pngなどで画像を作成してから変更する必要があるみたいです。

あの小さい画像を設置するのがこういう方法でできるとは知らなかったので、勉強になりました。