【hoverで色変え】ちょっと流行りのグレースケール→カラー画像を使ってみた

みなさん、おはようございます!こんにちは!こんばんは!

りんごちゃんです。

さて、梅雨もあっっっっっというまに空けてしまって、スタイルを気にする季節がやってきましたね。みなさん、ちゃんと水分補給しなきゃダメですよ?熱中症には気をつけてくださいね!エアコンのかけ過ぎにも注意!!

もう学生たちは、夏休みとかに差し掛かってきているのですかね〜羨ましいです。( ;´Д`)

海とかにも行きたいですねーそのためにはダイエットもしなくちゃですけど( ;´Д`)

ではでは、本題に入りますか!

題名にもあるようにちょっと流行りに乗ってみました!

いま、当サプライドが8月に5周年になるので、それに向けて、サイトをリニューアルしちゃいます!それで、今はどんなサイトが流行りなのか調べてみました!

するとこちらが出てきました

画像をスタイルでグレーにして、カーソルが重なった時にカラーになる。

もう一つは画像が少し大きくなるんですよ!表示されている画像の大きさは変わらないので、中にある画像がブワンと大きくなる動きが意外と面白い。

では、コーディングして行きましょう。

まずは、htmlはこんな感じです画像をdivで囲んで

CSSでまず外で囲んでるクラスwakuに幅高さを決めて(基本的には画像に合わせて作った方がいいです)、display:block;をかけて、下の三行を入れるだけです!

これでまずは、画像がグレーになります。()のなかの1は、グレー100%を示しています。

次にカーソルが重なった(以降ホバー)時にグレーのフィルターを外します。

()のなかの1を0にするだけですね。

これだけだとホバーした時にパッとカラーに変わるのでそこで!

これですよ!

transition-duration: 1s;

このコードをそれぞれのスタイルにかけるとふわ〜をカラーになったりグレーになったりします。

これで画像をグレーにしまくれますね!

では、次に中の画像をホバーした時に大きくしましょう!

ここでは、中のimgをいじります。

 

まずは、画像自体にtransition-durationを指定します。ここで、枠と画像との間に余白が入っていると見栄えが良くないので、0.1%ほど大きくしています。ここは好みです。

次にホバーした時にtransform: scaleで画像のサイズを大きくしています。1は100%のサイズをしているので、それより大きくしたい場合は1以上の数値にそれより小さくしたい場合は、1より小さい数値に指定したらオッケーです。

これで終わりじゃないですよ。これを忘れちゃダメですよ!

この一文をdivに書き忘れるとdivからはみ出ても表示されちゃいますので、気をつけてくださいね!

これで完成です♪

これひとつ入れておくだけでも流行りに乗っかったサイトになるでしょう〜〜〜☆*:.。. o(≧▽≦)o .。.:*☆

では、失礼します。まったね〜〜〜♪

2017年四半期に思うこれからのWEB開発

2017年四半期に思うこれからのWEB開発

こんにちは。セリーナです。

IT技術の進歩は著しいものがあり、昨年使った技術でもすでに古いということが良くあります。しかしながら、基本は全く変わっていないということも事実です。

現在、サプライドではWEB受託の案件を受託しており、打ち合わせ時にはお客様といろんなお話をします。その中で、○○のサイトのようにしたいご希望や、○○したときに○○するエフェクトを入れたい。というお話もあります。
基本的には、WEBでできている表現はすべてできるのですが、コストや飽きが来ないか、納期なども重要になり、そのあたりもお打ち合わせしながら、ご希望のデザインに仕上げていきます。

現在、ホームページを作るためには、
下記、方法が挙げられます。
・各サーバー屋さんから出ている簡易作成サービスを利用する
・自分自身でHTML,CSSを勉強してレンタルサーバーにあげる。
・詳しい友達に頼む。
・WEBページ制作会社に依頼する。
・Wixなどのホームページを簡単に作れるサービスを使う。
・楽天などのショップページ作成で簡易的にページを作る。
・Blogサービスを使い、それ自身をホームページ化する。
・Wordpress.comのサービスを使い、それを活用する(ページ+ブログが同時にできる。)
・自分自身で勉強して、レンタルサーバーにWordpressをインストールする。
・ページは作らずSNS内のfacebookなどでお店ページを作る。

上記のように、現在では、ホームページを言っても色々な形で作成することがあります。
デザイン良くページを作ることに加え、今は検索エンジンでの結果表示、つまりSEO(Search Engine Optimization)を気にしたり、SNSに投稿するためのOGP(Open Graph protocol)を気にしたり、ページの読み込み早さを気にしたり(PageSpeed Insights)、ページを作るだけでなく、様々なことを考えなければいけません。
もちろん、制作時にはすべてを考えます。

ですが、
一番重要なのは、


HTML
(HyperText Markup Language)とCSS(Cascading Style Sheets)です。
厳密にいうとHTML5とCSS3ですね。

これさえきちんとわかれば、どんなものにも応用ができます。

つまり、様々なサービスを使ってWEBサイトを作ることは可能ですが、
HTMLとCSSの基本を知らないと、ただ誰かのシステムの上に乗っかって作業する人になってしまいます。それでは、サービスが変わるために、またそれを覚えなくてはいけません。
これは、他のサービスにも言えますね。
C言語やC++,Java,JavaScript,Ruby,Python…など、基本の言語を学ぶと良いでしょう。

つまり、これからのWEB開発をするために重要なことは、
さまざまなサービスがあるが、

基本を覚えよう!

です。
そして、それから自分の好きなサービスを使うのが良いと思います。

「初心忘れずべからず。」ですかね^^

新しい情報を期待した方、すみません。