Sabitlenmiş Tweet
ポートフォリオサイト新しくしました。
Web制作のコーディング（HTML / CSS / WordPress）を中心に、ご相談・ご依頼を受け付けています。
ご興味がありましたら、ご覧ください。
yuichi-web.site
日本語
ゆういち@webコーダー
107 posts
ゆういち@webコーダー
@yuichi1708
大阪在住｜不動産業界会社員→フリーランスWEBコーダー｜HTML/CSS/JavaScript/WordPressを用いたHP・LP制作をしています。
Katılım Ekim 2022
17 Takip Edilen29 Takipçiler
今週のお題 「メガメニューを段階的に表示しよう」
CSSで実装しています。
transitionでhover時にコンテンツが浮き出るタイミングに差をつけています。
メガメニュー内のコンテンツは当初display:flex;で作成していましたが、display:grid;の方が安定しました。
#デイトラ #ウィークリーコーディング
日本語
今週のお題 「フッターがめくれて登場」
CSSで実装しています。
フッター分の余白は変数にして、JavaScriptで設定するようにしました。
スマホ幅だとフッターの上部が見切れてしまったのでPC幅のみの演出にしております。
#デイトラ #ウィークリーコーディング
日本語
今週のお題 「文字の一部を拡大してそのまま背景にしよう」
CSSのアニメーションで実装できました。
タイミングを合わせるのが大変でした。
scaleの値をかなり大きくしたので処理が重たくないか気になります。
#デイトラ #ウィークリーコーディング
日本語
今週のお題
「写真にグリッチ効果をかけてみよう」
CSSで実装できました。
translateのxとyで振動を加えて、skewで歪みを加えました。
過度にやりすぎると気分が悪くなってしまうので、いい感じに調整するのは難しいですね。
#デイトラ #ウィークリーコーディング
日本語
先週のお題
「3Dに写真を並べて回転させよう」
CSSとJavaScriptで実装できました。
ほとんどの部分をChatGPTに聴きつつ作りましたが、リサイズ時に再計算されたり、カードの数に関わらず、動くように作れました。
ようやく仕組みが腹落ちするようになりました。
#デイトラ #ウィークリーコーディング
日本語
・最近の取り組み ：ポートフォリオサイトのWordPress化
・本日の学び：プラグイン"Category Order and Taxonomy Terms Order"は、とても便利
デイトラのカリキュラムを見直していると上記プラグインが記載されていました。
とても簡単にタクソノミーの並び替えができました。
今まで表示順を並び替えるコード、管理画面に並び順のカラムを付け加えるコードを記述しておりましたが、これらから解放されるとなると、とても有意義な学びになりました。
#デイトラ #Web制作
日本語
今週のお題
「スクロールに追従するナビゲーションを表現しよう」
対象が画面に入ったら、それに応じたメニューにクラスを付与。
付与したクラスにスタイルを充てることで、実装できました。
scroll-behavior: smoothを記述するだけでスムーススクロールになるのでとても便利でした。
サイトが見やすくなりました。
#デイトラ #ウィークリーコーディング
日本語
今週のお題 「ホバー時に追従する画像を表示しよう」
対象にホバーしたら、それに応じたクラスを付与。
付与したクラスにbackground-imageでそれぞれ画像を充てる。
こんな感じで実装できました。
#デイトラ #ウィークリーコーディング
日本語
・最近の取り組み ：ポートフォリオサイトの作り直し・WordPress化
・本日の学び：ボタン等の幅の指定について
width: 200px;
max-width: 100%;
以前まで書籍等を参考にして上記のように指定していましたが、親要素にdisplay:grid;を指定することも多い現在では、以下のように記述する方がレイアウト崩壊が起こりにくいことがわかりました。
width: 100%;
max-width: 200px;
#web制作
日本語
今週のお題 「雪を降らせてみよう」
CSSで実装しました。
雪を揺らしたり、降るスピードを変えてみたりと、雪っぽさをコーディングで表現するのは、とても難しかったです。
#デイトラ #ウィークリーコーディング
日本語
今週のお題 「ダイナミックに場面を切り替えよう」
CSSで実装しました。
いい感じに拡大させたり、セクションを出現させる調整が大変でした。
#デイトラ #ウィークリーコーディング
日本語
＼ 弁護士監修・生成AI条項にも対応 ／
AI時代のトラブルを未然に防ぐ
フリーランス向け契約書テンプレート
無料プレゼント🎁
生成AIを使った制作が当たり前になりつつある今
✅自分の制作物の著作権の扱い
✅制作物や顧客情報のAI学習の取り締まり
✅トラブルが起きた際の責任範囲
…といった ポイントを押さえた「今の時代用の契約書」が必須になっています。
そこで今回、弁護士監修 ＆ 生成AI条項まで完備した、最新版の「フリーランス向け契約書」テンプレートを無料配布します💼✨
🎨Webサイト制作（デザイン／コーディング／LP制作など）を想定した内容
🎨生成AI利用時の著作権トラブル・AI学習禁止・秘密情報のAI入力制限などにも対応
🎨案件ごとに相手先・金額・納期を埋めればすぐ使える実務仕様
他のフリーランス業種の方も、「サイト」を「動画」などに置き換えれば使えるようになっています◎
※実務で使う際は、ご自身のケースに当てはまるか、顧問弁護士等にご確認のうえご利用ください。
【受取手順】
1️⃣ この投稿に「いいね」
2️⃣ リプに「契約書」とコメント
3️⃣ 自動返信で届いたURLから受け取る
【配布期限】
📅 12月25日（木）23:59まで
この「AI社会」の現代において、AIを使うこと自体はもはや前提で、その進化と普及の流れを逆行させることはできません。
だからこそ、著作権侵害や情報漏洩につながらないよう気を配りつつ、便利さと権利保護のバランスを取ることが大切です。
AIを上手に使いながら、自分もクライアントも「双方よし」になるよう、ぜひこの契約書を活用してください👍
日本語
今週のお題
「斜めにマスク」
clip-pathとopacityを組み合わせて、transitionでアニメーションの開始タイミングを調整しました。
#デイトラ #ウィークリーコーディング
日本語
#実案件チャレンジ 合格いただきました。
とても嬉しいです。
納期を意識した良い経験になりました。
貴重な機会をいただき、ありがとうございました🙏
#デイトラ
大滝昇平｜デイトラ＆にぼし香 代表@showheyohtaki
#デイトラ Web制作コース 第4回 #実案件チャレンジ 結果発表🎊✨ 今回は全体的に品質が高く、なんと約8割の方々が合格水準でした🎉 📝審査基準 ✅デザイン再現度：50ポイント ✅アニメーションや仕様等：50ポイント の合計100ポイントで、8割の80ポイント以上を取れている方を合格としています。 👑優秀賞 @yunastyle0428 @shunei_web @aco_web36 上記の3名の方は、なんとチェック項目に対して満点合格でした！すばらしい👏✨ 🥇合格者一覧 @tsuru__web @web405510529922 @oubai1108 @senyayi @yellow___web @mar_web_design @zuzu_chan22 @ryo_web0712 @to82536 @yuichi1708 @UruMiku @yunastyle0428 @sho_web440 @fasao_web0305 @sayakatsuji @Beji1210 @shunei_web @shifthub2025 @shogo_web_ @Hinotuka_No1 @ikirin_web @kii_webbb @nami_design73 @web895302414432 @honu55creator @aco_web36 @yumi_web0528 @chisa_dailylog_ @odango_hoppe @kabura_oishi @haru_willstudy @NagomiDesigns @biba_jin2 @yaru_or_yaru @y_ma_1110 @9696tashiro @sa7e110 @TKG1494863 @ryo224web @hayakawa_design @umi_PortoLino ========= 🎓総評 久しぶりの開催で気合いが入った方も多かったのか、今回は一段とレベル高かったです👏 また、課題中に何箇所か「 #ウィークリーコーディング 」で扱った実装も取り入れたのですが、皆さんきちんと対応されていて、日々の学習の成果が感じられました✨ 合格された皆さんには、実務レベルのコーディング力であることを証して、添付のような合格証を進呈いたします👏㊗ 本当におめでとうございます！！！ なお、大量の応募にも関わらず、応募作品はすべて、デイトラWeb制作コース講師であり、連結社員数6000人規模の大企業のグループでWeb部門の制作リーダーも担当されている @haniwa008 さんがチェックしてくださいました...！ さらにレビューコメントまで書いてくださったので、合否にかかわらず、参加された全員にコメントをお送りしたいと思います。（はにわまんさん、本当にありがとうございます🙇♂️） レビューコメントは、参加登録いただいたメールアドレスに1週間以内にお送りしたいと思いますので、届くまで楽しみにお待ち下さい😊 それでは、第5回開催もお楽しみに🙌
日本語
今週のお題「前のセクションを "ボカして背景に"」
CSSとJavaScriptで実装しました。
・2つのセクションを要素で囲って高さを確保する。
・2つのセクションにposition: sticky;を指定する。
・スクロール量に応じて前のセクションのぼかしを進める。
・一定量スクロールしたら次のセクションを出現させる。
こんな感じでできました。
#デイトラ #ウィークリーコーディング
日本語
■デイトラ卒業制作②(みなみ歯科)完了
卒業制作2つ目になりますが、1つ目の時WordPressの理解度が上がりました。
最後Safariでアニメーションの動作確認のとき思い通りにいかず苦労しました。
#デイトラ #web制作
日本語
今週のお題「ポップに飛び出す」
cubic-bezier(x1, y1, x2, y2)の4つ目のy2を1より大きくすると、変化後より大きくなる瞬間があり、飛び出しているようになりました。
勉強になりました。
#デイトラ #ウィークリーコーディング
日本語
今週のお題「スクロールの途中で横スクロールに切り替わる」
CSSとJavaScriptで実装しました。
インナーにピタッと止める調整に時間がかかりました。
#デイトラ #ウィークリーコーディング
日本語