祐介＠Web制作

勤務先のHP制作の担当になりWeb制作にハマる｜日々学習継続中｜Web制作・コーダー｜一児の父｜#デイトラ｜シナカフェ

HTML｜CSS(Sass)｜JavaScript(jQuery)｜XD｜Photoshop｜Git(GitHub)｜Shopify Partner｜WordPress学習中

[祐介＠Web制作 @coding_days]

📝backdrop-filterで写真加工

Photoshopとか使わなくても
CSSで写真加工が簡単に出来るのに感動。

FVとかで使うと雰囲気ありますね！
実際に使ってみたくて
CodePenで一覧にまとめてみました。

それぞれの効果内容とメッセージが
リンクするとグッと伝わる感じします。

#Web制作
#Webコーダー

[Kobayashi - the bond studio @pulpxstyle]

即戦力になるのが楽しみな写真エフェクトのCSSコード

[祐介＠Web制作 @coding_days]

Crome,Edgeでスクロール時にがたつく。

調べるとpositionやbackground-attachmentでfixed使うと起きるようだけど、どう解決するんだろ。

1つ解決するとまた何か起きる😂

#Web制作

[祐介＠Web制作 @coding_days]

@merukaku はい、頑張りましょう！

[祐介＠Web制作 @coding_days]

#今日の積み上げ

おはようございます！
今日も仕事休みにしたので
集中して学んでいきます！

朝活5:30-8:00
└ デイトラ上級DAY5・6

午前・午後
└ デイトラ中級最終課題コーディング
└ 実提案WFのチェック

#駆け出しエンジニアとつながりたい
#デイトラ

[祐介＠Web制作 @coding_days]

デイトラでPHPの基本講座あるけど
JavaScript勉強していた時期もあり
ちょっと楽しいですね！

ここが本質では無いと思うので
サクサク進めながら学んでいきたいと思います。

このあとはデザイナーさんとのミーティング。
新しいことへの挑戦はワクワクしますね！

#駆け出しエンジニアと繋がりたい

[祐介＠Web制作 @coding_days]

@ken_cococode Kenさん、ありがとうございます！
頑張りましょう！

[祐介＠Web制作 @coding_days]

おはようございます！

＃今日の積み上げ

・デイトラ上級編Day4-6
・デイトラ中級最終課題のHTML設計
・Zoomミーティング1件

日中は家族と過ごしますが、
朝と夜、隙間時間でしっかり学んでいきます！

#デイトラ
#プログラミング初心者と繋がりたい

[忍者CODE｜挫折させない無期限サポートのオンラインプログラミングスクール【公式】 @ninjacodeee]

【🔥特大報告🔥】

皆様のおかげで忍者CODE 1周年❗️

と言うことで特大プレゼント✨

最新版13インチMacBook Pro：1名様
アマギフ1万円：3名様

■参加方法
①RT＆フォロー
② https://t.co/C1Yj62cXVR にログイン後
　トップページにある応募formから応募

■応募期間 3/5 23:59

参加資格はコチラ↓

[祐介＠Web制作 @coding_days]

デザインカンプがPCしかない時は
悩む部分もあるのでこのサイトで
たくさんの実例に触れて引き出し増やすと
時短になりそう！

Responsivelyというアプリと併用すると
デバイス別での見比べも出来て
より勉強になりそうです。

良いサイトをありがとうございます！

#Web制作

[しょーご@しょーごログ運営 @samuraibrass]

レスポンシブでのよしなになコーディングってどうすればいいんやって人は、例えばこちらのサイトとか私はもう2年ほど追ってますがいいですよ！
実例を見て引き出しを増やしておくといいと思います。
https://t.co/AxNPRHK4Fh

[祐介＠Web制作 @coding_days]

@ake_nyanko さんのnoteめちゃくちゃ分かりやすくて読んで良かった。まずは安定的に60点が出せるように意識します！

#Web制作
#駆け出しエンジニアと繋がりたい

https://t.co/i05XU6ojPh

[祐介＠Web制作 @coding_days]

#今日の積み上げ

問合せフォームを実装
・主要ブラウザで見え方統一
・GoogleFormに紐付け
・チェックボックスCSS Animation
・必須項目全て入力でボタンクリック可
・Tabでinput非表示部分もアウトライン表示

#デイトラ
#Web制作
#朝活

[祐介＠Web制作 @coding_days]

店舗のサイト制作を初めてデザイナーさんと組んで情報設計からやる事になったのですが、その業界や競合について調べて、周囲にヒアリングして、サイト制作の目的やコンセプト考える…

ただ題材としてデザインカンプをコーディングしているだけでは気づけなかった事が多いですね！

#Web制作

[祐介＠Web制作 @coding_days]

@ninjacodeee @web @nk_Nshouse 参加させてください！

[祐介＠Web制作 @coding_days]

📝デイトラ総復習課題②

PC版がほぼ完成。
問合せフォーム前まで約5時間30分。
問合せフォーム、、、2時間😂

問合せフォームのストック作って
次はもっと早く出来るはず！

細かなアニメーション追加して
レスポンシブやって、あと少し。

#デイトラ
#Web制作

[祐介＠Web制作 @coding_days]

📝デイトラ総復習課題①

時間計測しながらコーディング中。
仕様指定でドロワーメニューは
drawer.jsを利用なんですが
調整するのが逆に大変ですね。

色々と復習になっている（なりそう）なのが
デイトラすごいな、と思う瞬間。

#デイトラ
#Web制作

[祐介＠Web制作 @coding_days]

📝XDカンプからコーディング

@cresta_designさん初級編

▼ 実施したこと
☑︎ 自作テンプレ利用
☑︎ BEM利用
☑︎ font周りをfunctionで管理
☑︎ Sassの分割管理
☑︎ CSS animation追加
☑︎ SP・TABレスポンシブ
☑︎ 主要ブラウザでチェック

→約5.5時間

#クリスタチャレンジ
#Web制作

[祐介＠Web制作 @coding_days]

📝画像形式ごとの特徴

こちらのサイトが分かりやすかった。
それぞれの特徴を理解して
適切な画像形式で利用出来るようにする。

☑︎ ベクター画像とラスター画像
☑︎ PNG8、24、32と種類がある
☑︎ SVGはCSS・JSでの操作が可能

#プログラミング学習
#Web制作

https://t.co/bAAVoDfB5P

[祐介＠Web制作 @coding_days]

これ嬉しい！

今まさに色々と調べていたところなので
しっかり読み込んで勉強させていただきます。

[TAK @tak_dcxi]

今年最後のZennの記事を投稿しました。自分がよく使っているSassのmixinとfunctionのスニペットをまとめたものです。Sass利用者の方は是非参考にしていただければ嬉しいなと。

よく使うSassのmixinとfunctionのスニペットをまとめてみた｜TAK https://t.co/1v1DhiyPqh #zenn

[祐介＠Web制作 @coding_days]

📝BEM命名規則チートシート

こんなチートシート発見！
1ブロックで1ファイルを意識して
すんなりクラス名つけるべく
エレメントの表現方法増やす。

#プログラミング学習
#Web制作

https://t.co/ICAvZZJYj2

[祐介＠Web制作 @coding_days]

さっさとコーディング始めてしまえば
それなりにレイアウトは作れていくけど
コーディング前のこういう時間が
今後の自分を助けてくれる気がする。

しかし…意外と時間が掛かる😂

経験ない中で考えすぎても始まらないので
まずはざっくり整理して一度進めてみる！

#デイトラ
#プログラミング学習

[祐介＠Web制作 @coding_days]

📝SCSSファイル分割

デイトラの練習課題の最後は
長いSCSSファイルを
いったりきたりスクロール…

総復習課題に入る前に
これまでの内容含めてテンプレ作成中。
これでだいぶ分かりやすく整理出来そう！

#デイトラ
#Web制作

https://t.co/hgOCa5vKpP

[祐介＠Web制作 @coding_days]

📝SCSSファイル分割

デイトラの練習課題の最後は
長いSCSSファイルを
いったりきたりスクロール…

総復習課題に入る前に
これまでの内容含めてテンプレ作成中。
これでだいぶ分かりやすく整理出来そう！

#デイトラ
#Web制作

https://t.co/hgOCa5vKpP