「私はこうやってつくりました」ポートフォリオ作成時のポイント3つ!

どーも、こんにちは!らび太です。

毎日暑いですねι(´Д`υ)
暑いのは少し苦手だったり。。。
連日最高気温が30度を超えちゃってるので流石にゲンナリしてますorz

それにしてもこう真夏日が続くと、冷たいアイスやかき氷が恋しいですね。
某●ーティーワンのアイス食べたいけど、昔通ってた学校の近くにあるめちゃめちゃおいしいかき氷屋さんに久々に行ってみたい気もする。
でも夏バテしても困るし、もうすぐ土用の丑の日だしウナギもがっつり食べたい。。。
ていうか焼き肉が食べたい。自宅の近所にある焼肉屋さんが(以下略

と、食べ物の話ばかりしててもしょうがないので、本題に入りますね。


皆さんは「ポートフォリオ」を作成したことがあるでしょうか?

webデザイナーやクリエイターを志望する人にとって避けては通れない道といっても過言ではないポートフォリオ作成。web制作会社等に面談に行く際には必須となるものです。
今回は自分が作成した時の具体的なポイントをまとめて紹介しようと思います。

【1:載せておきたい項目を決めよう!】
・制作に携わったwebサイト(もしくはwebページ)名
・ページ画面
・担当箇所
・制作環境
・制作期間
・リリース日
・URL
・説明テキスト

まあサイト名は当然として、ページ画面はPCとスマホ両方あると良いと思います。
PC画面と言っても単にスクショするより、FireShotを使った方が断然便利!
縦に長いページも丸っと全部撮ってくれるので加工が格段に楽になります(*^^)v

※FireShotは、Google chromeの拡張機能の一つです。
ダウンロードはこちら↓
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

作業した担当箇所というのは、あくまで自分が制作にあたって取り掛かった部分のことです。仮に1から全部サイトの制作を担当したとしても、ディレクションなどコーディングやデザイン以外の部分も含まれて解釈されてしまうので(ディレクション等もすべて含めて携わったのであれば話は別ですが)コーディングとデザインだけを担当したのであれば曖昧な書き方をせずはっきりと書いた方が良いです。

制作する上で使用したソフトや技術の具体名を出すことも重要ポイントです!
制作期間やリリース日といった時間に関する事も「このリリース日までにどのくらいのスケジュールで作業してきたか」
を簡単で良いので載せておけば、仕事に対する時間の意識をアピールできるポイントになります!
URLも、既にリリース済みのwebサイトであれば載せておきましょう。

【2:説明テキストは“簡潔に”!】

サイト自体の説明のほかに、サイト内で担当したページの箇所と、制作する際に工夫した点などを具体的にまとめていきます。
ただしここで重要になってくるのが、見出しの通り「簡潔に」まとめることです!
面談の時に先方がポートフォリオを見てくれる時間はそう長くはないです。その中で「俺ここ工夫したんだよ!頑張ったんだぜ!!スゲーだろヒャッハー!!
と、熱意を長々とした説明文に込めたとしても、受け取る側はきっと一目見た瞬間に読む気が失せることでしょう。
そういった説明は、実際の面談で口に出して伝える方が良かったりします(とは言え本当にヒャッハーと叫ばないでくださいね。。)
なので、ポートフォリオに記載する説明文は出来るだけ目に留まりやすい箇条書きにまとめましょう。
本の帯文(帯に書いてあるキャッチコピー)みたいな形にまとめられると良いかも!

【3:いくつ見せるか・どの順番で見せるか】

先述の通り、先方はたくさんの人と面談をする機会があるため、一人ひとりのポートフォリオに目を通す時間は短いものと考えていいでしょう。
なので、一番自信のある、もしくは一番工夫して伝えたい内容のあるサイトは最初の順番にもっていくようにしましょう!
そうすれば面談の時にも一番に説明ができますし。
あと、先方に見せる際にはそれなりに数をそろえておく必要があると思います。これもあまり数が多いとすべて見てくれない可能性があるので、だいたい3つ~5つくらいは用意しておきたいところです。

【まとめ】

ここまで長々と説明してきましたが、ポートフォリオはweb制作やクリエイターには必須であると同時に、自分の能力を目で見て確認してもらえる唯一のツールです。
そのためにも、できる技術や知識は自分の中できっちり抑えておき、志望している制作会社などに「刺さる」ようなポートフォリオをぜひ作ってくださいね!
それではまた~(@^^)/~~~

【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を使わずにスタイルの使い分けができるこの疑似クラスたち、うまく使いこなせれば様々なレイアウトに応用ができると思うので試してみてくださいねー。

それではまた!

ちょっぴり差をつけよう!斜め背景のデザイン

こんにちは!bibiです。風邪が流行ってますねー
自分もその流行に乗りいまだに喉がつらいのと鼻が利かない後遺症に悩まされております。

鼻が利かないと味がよくわからないんですよね!
食事が美味しく摂れないことが風邪ひいたことより凹んでおります。。
まあ風邪には恨みはありませんよ!!むしろ少し休めてよかっ(略)

皆さんも風邪、気を付けてくださいねー! 風邪にはビタミンCと、身体を温かくして
さっさと寝ちまうのが一番ですよ★ミ

それじゃあ!快適なWEBライフを☆彡

 

 

 

 

 

 

 

 

おっと忘れてた・・・

 

 

 

 

 

 

 

 

記事ですよ記事!

誰も書かないなんて言ってないじゃないですか!!(逆ギレ)

 

 

 

 

えーと・・・

 

 

今回は・・・

 

 

誰にでも簡単にできます!背景を斜めにするデザインです!

 

htmlはまずこちら。

おっと心の声がだだ洩れ。。まあ事実ですからねしょうがないね。

 

CSSは以下を書いてください。背景の色は僕の怒りを表しています。

これで準備完了!カンタンでしょ。。

 

 

ポイントは、背景に色を付けて、

 

ここで角度をつける。

 

斜めデザインだと初見で「おおっ!」って思われること請け合いです!

CSSのみで意外と簡単にできるので、皆さまお試しあれ!光あれ!

HTMLのみの記述でアコーディオンを設置する。

お久しぶりですsu-sanです。

長すぎる文章だったり、補足項目だったりにちょっとした部分に折りたたみ(アコーディオン)が欲しい時ってありますよね?

今回はHTMLの記述のみでそうしたちょっとした部分にアコーディオンを追加する方法を書いていきたいと思います。

下記が実行結果。

 

 

ここが開くよ
この要素が出ますよ

 

 

 

いかがでしょうか?かなり簡単にアコーディオンの実装ができたのではないでしょうか。

の部分で矢印がデフォルトで出てしまいますがcssに下記記述をすれば消すことができます。

以上!良いWEBライフを!