のり@WEB制作｜SWELL

Web制作7年目｜Swellのカスタマイズ得意｜GSAPアニメーション｜固定企業様と業務提携中｜脱jQuery｜34歳からWebスキルを必死で習得→固定企業様とWeb制作で事業提携｜大切な家族と地元でのんびりとした暮らしがしたい｜3児の父👓｜飛騨高山在住🐵｜お仕事のご依頼はDMにて📩

[のり@WEB制作｜SWELL @noritotoweb]

ココナラでブログを投稿しました！

【ホームページ入門】SWELLでヘッダーメニューをかっこよくカスタマイズしよう（日本語と英語の2段メニュー）

https://t.co/1TSTOEy4hm #ココナラ

[のり@WEB制作｜SWELL @noritotoweb]

先日、コーディングを担当させていただいた案件で、HPからの求人のお問い合わせが数件あったと連絡をいただきました！
（実績掲載不可なのでお見せできなくて���念です）

ファーストビューのアニメーションがインパクトがあって良かったとお褒めいただき本当に嬉しいです☺️

今日もがん��ろ✊

[竹本純@デザイナー @takepon0513]

【拡散希望】
高山市、飛騨市でバスケやりたい方募集！
20〜30代でゆるーりとやってます。
興味のある方DMかコメントください！

#高山市　#飛騨市　#飛��高山
#バスケ　#バスケットボール

[のり@WEB制作｜SWELL @noritotoweb]

先日納品させていただいたサイトは、クライアント様のご希望により「日本語」と「英語」を切り替えられる多言語サイトの仕様にさせていただきました！

同時に進めている他の案件も「多言語」の仕様なんですよね。

最近はグローバル化してきているってことですかね！

[のり@WEB制作｜SWELL @noritotoweb]

先日納品させていただきましたクライアントさまからこのような嬉しい評価をいただきました！

WEB制作を頑張ってきてよかったと思える瞬間ですね！
とても物腰のやわらかくて丁寧な方だったので、私も最後まで気持ちよくお取引ができました！

これからも価値あるサイトを提供できるように頑張ります！

[のり@WEB制作｜SWELL @noritotoweb]

#ココナラ で #swell 専用のサービスを出品させていただきました！

swellのカスタマイズのみのご相談だけでも大丈夫です。
swellに関して何かお困りのことがありましたらお気軽に��声がけください！

https://t.co/b2HC8dPNjY

[のり@WEB制作｜SWELL @noritotoweb]

ココナラでプラチナランクに認定していただきました���
引き続きコツコツと頑張ります！

#ココナラ　#プラチナ

[のり@WEB制作｜SWELL @noritotoweb]

スライダーといえば、Swiper一択かと思っていたのですが、

・jQueryに依存していない
・ファイルサイズが軽い
・使いやすい

なんて三拍子そろった「Splide」というものがあった��ですね！

じゅんぺいさん(@junpei_sugiyama)の記事を参考にいろいろと試してみました😄

https://t.co/YO5DvX9icO

[やすだ|シニアマーケティングが得意なWebデザイナー @seniorbusiness_]

【再掲】
先日ホームページを納品させていただいた方���ら嬉しいお言葉をいただけました。
オンラインでのやり取りになるためお客様の不安を払拭、与えないことは常に意識し、質問には即返信することを心掛けています
クライアント様にもその点も評価いただけたようです☺️ https://t.co/aqLslfPacL

[のり@WEB制作｜SWELL @noritotoweb]

「swiper demo」

で検索すると、#swiper の様々なデモが記載されている公式ページが出てきます。

気になるスライダーがあれば、そのデモの「core」ボタンを押すと、実装コード一式が表示されるので、

もし、カスタマイズした��場合は、このコードをいじれば簡単に実装できます。

���利ですね👏

[のり@WEB制作｜SWELL @noritotoweb]

HTMLを組むとき、div祭りにならないように心がけています。

お問い合わせフォームの「項目名」と「インプットタグ」の並びなど、1対1になっているものは
dl > dt > dd

投稿一覧など同じアイテムが並ぶものは
ul > li

丁寧にマークアップすることで、sass��書きやすくなりました😄

[のり@WEB制作｜SWELL @noritotoweb]

ココナラではまだ実績が少ないため、
実績をつくりたいと思いプランはかなり格安で提供させていただいております🙇‍♂️

もしコーディングでお困りのことがありましたら、ぜひこの機会にいかがでしょうか？

よろしくお願いいたします😄

[のり@WEB制作｜SWELL @noritotoweb]

#ココナラ でも出品しました。

コーディングのサービスをご提供しております。

・ #コーダー を探しているディレクターの方
・パートナーを探しているデザイナーの方
・手早くコーディングをしてくれる人をお探しの方

お気軽にDMお待ちしています😄

https://t.co/84VRu1g8cd

[のり@WEB制作｜SWELL @noritotoweb]

❌聞かせて
↓
⭕️効かせて

🙇

[のり@WEB制作｜SWELL @noritotoweb]

かえるジャンプができるようになりました🐸

【修正前】
ホバーを外すと不自然にアニメーションが停止

【修正後】
ホバーを外してもキリ良くアニメ���ションが停止する

GSAP の onCompleteオプション & if文 で実装。

easeを聞かせてアニメーションすると、生き物みたいにかわいく見えます🐸

[のり@WEB制作｜SWELL @noritotoweb]

#ランサーズ で出品しました。

・ #コーダー のパートナーを探しているデザイナーさま
・忙しくてコーディングに手が回ら��いWeb関係者さま
・HP制作を誰かに頼みたい個人事業主さま

コーディングでお困りごとがある方はお気軽にご相談ください😄

https://t.co/KRMLcmmveq

[のり@WEB制作｜SWELL @noritotoweb]

@ToshiTraveler 見れました！
よろしくお願いします🙇‍♂️

[とし@フリーランス育成コーチ @ToshiTraveler]

🎁無料プレゼント企画

月売上20-100万達成者続出！
WEB制作の最速収益化方法✨

学習-営業-納品まで完結!
合計17特典を配布します!

✅動画 計150分
✅PDF 計72ページ
性格タイプ診断
案件獲得ロードマップetc…

🎁受取方法
① @ToshiTraveler をフォロー
②RT&いいね
👉 https://t.co/75lNZM19WB

[のり@WEB制作｜SWELL @noritotoweb]

1行の文字列の場合ですが、要素幅をは��出た部分を自動的に省略するには、

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

の3つの指定をセットで書けばいけますね。

[のり@WEB制作｜SWELL @noritotoweb]

object-fit: cover;　で画像を表示したとき、

object-position　が　 50%, 50%　の初期値になっているので画像の中心が中央にくるように切り取られます。

画像によってこの値をずらしてあげれば、いい感じになるかも。

背景に画像を指定して、background-positionを使わなくもいけるんですね。

[のり@WEB制作｜SWELL @noritotoweb]

画像にグラデーションをかけるには、

background-image:linear-gradient(グラデーションの指定), url(画像パス);

みたいな感じでlinear-gradientの後に画像パスをカンマでつなげて書けばOK

忘れないようにメモメモ。

グラデーションの調整はこのツールがとても便利です。
https://t.co/g0Qg1nFp1H