【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 .。.:*☆

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

似て非なる疑似クラス!:nth-child(n)と:nth-of-type(n)の違い

こんにちは、初めまして。らび太と申します。
初めての投稿です。これからよろしくお願いします。

(こうやって書くと90年代のWeb掲示板みたいですね。。)

さて今日は、疑似クラス「:nth-child(n)」と「:nth-of-type(n)」について書いていこうかと思います。
どちらも「上からn番目の要素」を選択するのですが、childとtypeで選択する基準が異なります。

それではまず:nth-child(n)からー。
以下のhtmlをもとに話を進めていきます。

:nth-child(n)は、親要素から数えてn番目の子要素を選択することになります。
記述はこのような感じです。

親要素(ここではsection要素)には、divとp合わせて6つの子要素があり、p要素は2,3,5,6番目にあります。
上記cssは「親要素内にある子要素で、3番目と4番目がp要素だったらそいつの背景色を変えてね」という意味です。
しかし、4番目にはdiv要素があるため、実際に適用されるのは親要素から数えて3番目の子要素(p要素)のみとなるのです。

結果は以下のような感じです

対して:nth-of-type(n)はというと

:nth-of-type(n)は、親要素内にある同一の子要素のn番目を選択することになります。
先述のchildだと親要素内のすべての子要素が対象だったのに対し、
of-typeの場合だと「親要素内にあるp要素から3番目と4番目の背景色を変えてね」という意味の記述になるのです。
上記のhtmlではp要素が4つあるので、その中から3番目と4番目の背景色が変わります。

結果は以下のような感じです

まとめると、

  • 「指定した要素が親要素からn番目にあればスタイルを適用」するのが:nth-child(n)
  • 「指定した同一の要素が親要素からn番目にあればスタイルを適用」するのが:nth-of-type(n)

ということになるわけです。

この違いがややこしい、というか、初めてhtml/cssを勉強する人にとってはなかなか理解しにくいものがあるのではないでしょうか。
まさに自分がそうでした。。笑
なので、自分自身の復習もかねてこれを記事にしようと思いました。

ちなみにこの2つの疑似クラス、(n)の部分は数値のほかにも
even = 偶数番目の子要素
odd = 奇数番目の子要素
3n = 3の倍数の子要素
などといったキーワードや数値を入力することもできます。

1段ごとの写真配置を左右交互にレイアウトしたい時などに非常に有用です!
クラスやidを使わずにスタイルの使い分けができるこの疑似クラスたち、うまく使いこなせれば様々なレイアウトに応用ができると思うので試してみてくださいねー。

それではまた!

【Slack】【Google Drive】【サイボウズ】クラウドツールを活用しまくろう!【チャットワーク】【backlog】

こんにちは!bibiです。

日々のコミュニケーションツール、活用していますか?

メールでやり取りを積み重ねているあなた!

電話で話したリマインドをメールで共有しているあなた!!

あの時の内容が乗っているメールどこだっけ・・・?
いつの電話であの案件のその内容、話したっけ・・・?

そんなことにならないように、やり取りができるクラウドのご紹介です!
もちろんっ全部無料!!

1.slack
使いやすさ★★★☆☆
共有しやすさ★★★☆☆
使い込み度★★★☆☆
https://slack.com/intl/ja-jp
UIはお洒落で、直感的に使えるので、相手とのやり取りに最適!
ただ、海外発のツールなせいか、シンプルすぎて素っ気ないと思うところもありますね。。

2.google drive (+スプレッドシート)
使いやすさ★★★★☆
共有しやすさ★★★★★
使い込み度★★★★★
https://www.google.com/intl/ja_ALL/drive/
グーグルに登録していれば誰でも使えます!
ドライブで素材受け渡しは容量多く使え、スプレッドシートではほぼエクセルを、クラウドで共有できます。
クライアントとのやり取りやイメージの共有、議事録共有など、これさえあればメールなんて何それ美味しいの?という感じです!

3.サイボウズ
使いやすさ★★★☆☆
共有しやすさ★★★☆☆
使い込み度★★★★☆
https://cybozulive.com
グループチャット、スケジュール管理、Todoリスト、共有フォルダなど、多機能で使い勝手がいいこのツール。
惜しむらくは、2019年4月にサービス終了との事・・・

4.backlog
使いやすさ★★★☆☆
共有しやすさ★★★★☆
使い込み度★★★★★
https://backlog.com/ja/
タスク管理・進捗管理などを多用するならこれ!元からgitが組み込まれているなど、諸々機能があるのでいろいろやりたい方はおススメ!
ただ、無料バージョンだとそこそこ制限がかかるので、ある程度使い込んだ後に有料化してもいいかも。。

5.チャットワーク
使いやすさ★★★★★
共有しやすさ★★★★☆
使い込み度★★☆☆☆
https://go.chatwork.com/ja/
グループチャット、ファイル共有、それに加えてユーザー追加もしやすく、かゆいところに手が届きまくっているツール!
直感的に把握しやすいため、とっかかり~中級者は愛用間違いなしです!
ただこれも、無料版だとグループ作成制限などあるので、使い込む場合は有料版をお勧めします。

僕は先方とのやりとりはgoogle driveのスプレッドシートちゃん、社内での案件共有はチャットワークちゃんと、使い分けております!

皆様も自分に合ったクラウドツールを使って、快適なWEBライフを☆彡

ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

ちょっと差をつけよう!?【HTML】オッシャレーな便利機能【CSS】

こんにちは!bibiです。

今回は、テキスト選択時のハイライトのカラーを変更する小技をこっそりお教えします!

工程は超カンタン!

cssにこちらを記述します。今回はハイライトに鮮やかな赤色を指定。

これでOK!どうでしょう!この1ステップのみのお手軽さ!!!

ここに例えば、文字色自体をこのように変えたり

P要素のみに限定してハイライトをつけたり

意外と自由度高く行うことができます!

これであなたもハイライト・マスター!!!!

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開発をするために重要なことは、
さまざまなサービスがあるが、

基本を覚えよう!

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

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

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