いずみ
お疲れ様です。 パララックス画像、WEB制作学習中の自分からするとスタイリッシュで憧れます。 スクロールすると、スクロール量に応じて特定の画像だけが上向きに動く、というものになります。 色々とプラグインが出ているパララックスですが、今回はその仕組みを知るためにも1から自作してみました。 実務で1から自作することは、工数の関係上などであまりなさそうですが、学習の為にやってみました。 なかなか大変でしたが、仕組み自体はシンプルです。 仕組み今回はbackground-i
同じ要素が複数並んでおり、アニメーションが始まるタイミングに差をつけたい。 そんな事が結構多い気がします。 スクロールアニメーションやローディングアニメーションなんかがそうですね。 そういう時に遅くなるスピードを最初に設定しておいて、要素のインデックス番号に応じて自動でディレイが加算される@mixinをご紹介します。 @mixin animationDelay($quantity: 5, $speed: 150ms){ @for $i from 1 through $
webデザイナーに憧れるアラサー機械工、いずみです。 しばらく他の作業をやっていたり、仕事が忙しくなってきたりと、言い訳をして記事投稿をしばらく休んでおりました。 今回はコチラのバナーをトレースし、気がついたことをまとめていきたいと思います。 そして、今回トレースしてみてこんな感じになりました↓ 今回特に、再現度が低くなってしまいました。 前日にトレースに挑戦したのですが、似たフォントがどうしても見つからず、嫌になってやめてしまいました。 そして今回、縦長系の欧文フ
固定ヘッダーのサイトでたまに見かける、上にスクロールした時はヘッダーを表示し、下にスクロールした時はヘッダーを非表示にするやり方を紹介します。 まずはCSSで通常の固定ヘッダーと、ヘッダーが隠れた時のクラスをそれぞれ作ります。 //style.css//固定ヘッダー、トランジッションに関する記述.header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; transition: tr
vw・vhが登場し、cssのみで画面の幅と高さが取得出来るようになって久しいですが、この２つの値は若干の問題があります。 width: 100vw; は要素の幅をブラウザ幅と同じにする事が出来ますが、100vwはスクロールバーの幅も含まれます。 スクロールバーの幅分要素がはみ出すため、横スクロールが発生してしまいます。 height: 100vh; は要素の高さをブラウザの高さを同じにする事が出来ますが、これはブラウザすべてを含む高さになります。 iOSでサイトを閲覧
お疲れ様です。いずみです。 本日は jQueryを使ったタブメニューを紹介します。 ざっくり分けると、2つのやり方があると思います。 １つはaタグ(アンカーリンク)のhref属性を使ったやり方。 もう１つはクリックしたタブのインデックス番号を取得し、同じインデックス番号のパネルを表示するやり方です。 今回は後者のインデックス番号を利用したやり方を紹介します。 タブコンテンツが複数あっても、対応出来るようになってます。 jqueryのコードはコチラです↓ let ta
お疲れ様です、webデザイナーに憧れるアラサー いずみです。 自分はコーディングもできるwebデザイナーになりたいので、学習しなければいけない範囲としては、 デザインの法則(座学)・illustrator や photoshopのデザイナー向けの基本操作・デザインのトレース・html と CSS・sass や jquery・wordpress・php(wordpress用) この辺りになるかと思います。 範囲が広い事もさる事ながら、モチベーションを維持するのが一番大変かな
コーディングでフォントサイズをpxではなくremで指定した方が、アクセシビリティの観点からいいとされていますが、その理由とsassでpx → remへ変換する自作関数について紹介します。 絶対値と相対値 私の足のサイズは25.5cmですが、これはどこにいても25.5cmで変わらず、絶対値と呼ばれます。 WEBの場合pxが絶対値になるので、font-size: 16px;と指定したらデバイスやブラウザ環境に左右されることなく16pxで表示されます。 ブラウザの設定で文字サイ
お疲れ様です。WEB制作、グラフィックデザインの業界に憧れているいずみです。 WEBデザイナーを目指すにあたって、デザインのトレースや観察、コーディングやphotoshop等ツールの学習など身につけなければならないスキルは多々あります。 毎日時間をとって学習しても進んでいる実感がなくて、これで大丈夫なのかな・・・と、不安になる時があります。 そうはいっても、習慣としてひたすら続けていくしかないですね。 デザインを通してクライアントの問題を解決できる。そんなデザイナーになれた
sassで数字の単位を除く方法について書きます。 数字から単位を除くことで、フォントサイズをpx → remに直感的に変換出来てとても楽です。 コードはこちら↓ //function.scss@use 'sass: math';@use 'sass: meta';//各モジュールを読み込む@function strip-unit($number){//「単位を除く」という意味の自作関数、($number)に単位を除外したい数値を入れる @if meta.type-o
WEBデザイン学習中のいずみです。 今回は、photoshopのレイヤーマスクを使って、「ツルツルしたテーブルに被写体が反射する」ところを表現したいと思います。 こんな感じで、「テーブル」と「シャンプー」の写真を用意しました。 被写体を切り抜く レイヤーマスクで被写体を切り抜きます。 「被写体を選択」を使えばAIが自動で被写体を選択してくれますが、今回は練習の為にペンツールを使っていきます。 ショートカット「P」でペンツールに持ち替え、パスを打っていきます。 被写体の
WEBデザインナーに憧れるポンコツ人間、いずみです。 デザインのトレースや観察をする中で、気になった点や「なぜこのデザインにしたのか」の考察などを日々こちらのnoteに書いています。 基本的に自分の学習用ですが、私と同じくデザイナーに憧れ日々奮闘されている方にも閲覧頂けたら嬉しいです。 今回はコチラのバナーにしました。 文字だけのバナーになります。 フォントや文字詰め行送りなどのテキスト関係、余白や整列などレイアウト関係を中心に考察していきます。 トレースしたものがコ
どうも、数あるWEBデザイン・WEB制作系の記事の中から、当記事をご覧いただきありがとうございます。 WEBデザイナー志望の32歳、泉と申します。今回はphotoshopの操作に関するお話です。 photoshopでWEBデザインをする際、ボタンのアイコンやあしらいを作る機会は幾度もあると思います。 そんな時「水平方向に反転」、「垂直方向に反転」は意外と使うはず。 ショートカットについて調べてみたら、まさかの無かった・・・ ショートカット登録の手順 よく使うからショート
こちらの記事「デザインの気付き」では、WEBデザイン学習中の私 いずみが、気になったデザインのいいと思ったポイントや、このデザインにした意味などを考察していきます。 基本的に自分の成長の為の記録として書いていますが、もし私と同じようにデザインについて学習中の方の力になれたら、こんなに嬉しいことはありません。 今回考察するデザインはこちらのバナーになります。 早速 photoshopでトレースしてみました。 「早得」文字表現などは、難しそうなので省略。フォントも完全再現は
どうも、はじめまして。 数あるデザインに関する記事の中から、当記事をご覧いただきまして、ありがとうございます。 Webデザイナーを目指して現在学習中のいずみと申します。 現在30代前半になり、web業界を志望するには年齢高めではあると思いつつ、持ち前の諦めの悪さで日々悪戦苦闘しております。 さて こちらのnoteでは、日々デザインの学習をするなかで、気がついたポイントを自分用にまとめたものになります。 今日がその第一回目になりますが、自分と同じデザイン学習中の方にとっても
