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