コーダー㉿クボエミの記録👁️‍🗨️👾🦾

🌏webデザイナー/コーダー🌏【2024】 異業種からの転職でweb制作会社に就職💻 …

コーダー㉿クボエミの記録👁️‍🗨️👾🦾

🌏webデザイナー/コーダー🌏【2024】 異業種からの転職でweb制作会社に就職💻 アニメーション、レイアウトTTP!!解説。 コーディングめちゃくちゃ楽しい!を配信中🔈🔈🔈 【-figma -WordPress -HTML CSS-AI 】

最近の記事

苦い経験、、、もう迷わない!各デバイスの推奨サイズ。

こんにちは! 最近涼しくなって、秋限定のお菓子が増えてワクワクしている今日この頃です。 さて、今回は推奨サイズについてです。 私はデザインからコーディングしていく上で、レスポンシブにめちゃくちゃ頭を抱えています。🧠 サイトで動く要素を作るのが楽しいのですが、そもそも各デバイスで見た時にどう見えるのかをちゃんと考えなくてはと思いました。 デバイスによって動かす角度も速さも変わる、、、、その他諸々、、、 全てにおいてレスポンシブが付きまとうからです。👻👻 デザインからコーディ

    • 【code】親の指定した幅を子要素が画面いっぱいに広がりたい

      みなさんこんにちは!いつもいいね♡励みになります! まだまだ暑いですね。 雲が、まだまだやる気に満ちた夏雲なんですよね、、、☁️☁️ いいんだよ〜。太陽さんもういいんだよ〜。( ´ ▽ ` )な気持ちで汗だくで通勤しております。 寒い寒いって言いながらぬくぬくのお布団が恋しいです。カモン冬!!!! 今回は、containerで決めた横の幅に対して簡単に幅を突き破れるおすすめの方法です。 デザインの幅も広がるので登場シーンは多いと思います✨ まずなぜ幅を設定するの?デザイ

      • 【JS/jQuery編🚩】③世界一簡単なアコーディオン解説!

        JSの解説をしていきます! まだhtml編とcss編をみていない方は先にこちらをみて頂ければと思います⭐️・:*+.\(( °ω° ))/.:+⭐️ 今回もりもりになってしまってほんとにっ🍵‼️ ついてきて頂いてますでしょうか🥺感謝。 jsはhtmlにクラスを追加する箇所があるので、htmlの内容も貼っておきます!見ながら照らし合わせて頂けたらと思います。 🔸前回のHTML<section class="sectionQuestions"> ①  <div class=

        • 【CSS編🚩】②世界一簡単なアコーディオン解説!

          さて、次にCSSです!少しボリューミーですがポイントで解説しようと思います✨ 前回のhtml編を見ていただいた方がよりわかりやすいと思うので、まだの方はこちらからどうぞ! CSSゆるゆる解説していきます! 今回はSP(スマホサイズ)での画面幅の紹介になっております。 PCサイズにしたい方は画面幅の設定に気をつけてください!ぺこり。 🚩CSS① .sectionQuestions { padding-top: 24px; padding-bottom: 60px; ma

        苦い経験、、、もう迷わない!各デバイスの推奨サイズ。

          【HTML編🚩】見ればすぐ作れる!①世界一簡単なアコーディオン解説!

          本日の参考サイト✨ こちらのクルッとトグルが回って回転するアコーディオンパネルをTTPしていきます! 動きとしてはこんな感じ。👇 ふむふむ。理解したので早速やってみよう!!!!!! 今回はJSもはいっているのでそれは後編🚩に紹介しようと思います。 独学解説ですので、粗があるかもですがお手柔らかにです。 🚩HTMLわかりやすいように大きく分けて、①、②、③と、Aグループ❶❷❸、Bグループ❶❷❸、の5つのブロックに分けました! <section class="secti

          【HTML編🚩】見ればすぐ作れる!①世界一簡単なアコーディオン解説!

          【独学で神サイトを真似る】ヒヨッコ🐣コーダーが気になったボタンをつくってみた

          どうも! いきなりですがっ👀 デザインもコーディーングも一貫してできる人?ネーミング?が、WEBデザイナーってゆうのになんか違和感を感じる私。🐖 デザインとコーディングを合わせた良いネーミングってなんかないかなぁ〜。と思ってAIに聞いたら 『コードブロッサム🌷✨』って提案されてニヤニヤした。 『なんの仕事なん?』 『えっ、コードブロッサムやで✨』 絶対に言わんwwwwwwwwwww😂!!! さてっ。🍵 本日の参考サイトはこちら コーダー歴約3ヶ月のヒヨッコ🐣コーダ

          【独学で神サイトを真似る】ヒヨッコ🐣コーダーが気になったボタンをつくってみた

          【勝手にサイト分析】ヒヨッコ🐣コーダーが、svgに挑戦してみる!!

          暑いですねぇ〜。 溶けますねぇ🍨🫠 昔こんな暑かったっけ? 最近職場に出勤しても、髙井さんに『暑いですねぇ〜🥲』で始まるのがルーティンになってきました!笑 (ちゃんといつも答えてくれる高井さんの優しさ、、、🥲🤍) 暑い時は無理せずに、一緒に、SVGでも作りませんか? (無理やり🧠w) ページによく出てくる『→』や『・』などをsvgで作成しているページをよくみかけます。 参考サイトhttps://nasu.design/ imgでおくよりも自由がきくので実際に作ってみよ

          【勝手にサイト分析】ヒヨッコ🐣コーダーが、svgに挑戦してみる!!

          【勝手にサイト分析】回って回ってまわるぅ〜実践編!!!

          あっついですね!溶けてないですか?🍨 私はもうある程度溶けかけております。。。 最近かき氷にはまっていて、あのお店で食べるいい感じのばえるかき氷ではなくてですね、スーパーとかで売ってる一個80円くらいのアレです。 もうほんとに美味しい!サクレモン🍋も好きなんですけど、あのシンプルなミゾレとかをボリボリ食べるのが大好きです。 今日もそんなこんなでサイト分析していこうと思います。 最近サイトをいろいろ見てると、見てるだけでなくて実際作ってみたい!と思う事が多くなりました。 こ

          【勝手にサイト分析】回って回ってまわるぅ〜実践編!!!

          【勝手にサイト分析】簡単!gifで動きのあるサイトに!

          みなさんお元気ですか? あっついですね!!!!!! 夏が超がつくほど苦手な私は、またこの季節がきたか。。。と思っております。 もう地球にクーラーつけてくれないか🌏ってくらい夏が苦手すぎます。ぴえん。w さてさて、今回の勝手にサイト分析です!! 簡単に動きをつけれる方法も見つけたので紹介していきますね。ヒュィゴっ‼️ 本日の参考サイト https://www.shipsltd.co.jp/shipsmag/ 見た目の印象は、『動きのあるブログ』という印象。 アパレルブラン

          【勝手にサイト分析】簡単!gifで動きのあるサイトに!

          【サイト分析】バーガーメニューの並び順ランキング

          どもです。 2回目もみてくださってありがとうございます。嬉しい😁 今回の分析したかったことバーガーメニューはサイトの目次のような役割をしているなと思いました。 よくある並び順の傾向を理解すれば、セクションの並べ方や情報の流れの見やすさをより理解できるとおもいました。 全てのサイトの地図はバーガーに押し込まれている🍔🍔🍔!!! メニュートップ上位ランキング(ジャンルはバラバラ30件分で比較) 1、 TOP 2、 about 私たちについて 3、 サービス 商品 4

          【サイト分析】バーガーメニューの並び順ランキング

          【サイト分析】ヘッターメニューを収納!ハンバーガーメニューはSPだけじゃない!

          第一回サイト分析です! LP制作や、コーディングを進めていく中で自分のデザインの幅をもっと広げていきたい!サイトの仕組みを理解してわかりやすいコードを書きたい! そんな欲求がふつふつと湧いてきました😀 ボスに相談したところ、 💁‍♂️『サイト分析しちゃおう!』と。 よし!サイトのなぜなぜ?を勝手に分析していきます!!!!(🧠が単純) 学習のメモみたいになってしまう可能性もありますが。学んだことを一緒に共有できれば嬉しいです。 私がリサーチするので、一緒にレベルアップしてい

          【サイト分析】ヘッターメニューを収納!ハンバーガーメニューはSPだけじゃない!

          新人webデザイナーが入社して4ヶ月。

          みなさん、お久しぶりです。 新人webデザイナーとして、入社して4ヶ月がたちました。 全然blog更新できてなかったと、反省!!! 泥臭くてもリアルをお届けしたい!を、モットーにもっと更新していこうと思います! この4ヶ月、私が新しく学んだ事を紹介しようと思います。 『webデザイナー興味あるけど、どんな仕事をしてるんだろ?』とかっ。 『実際働いたら制作よりも、違う事してるのかな?』とか。 私も働く前に色々思ってて、そんな方の参考に少しでもなれたらなって思います。 会

          新人webデザイナーが入社して4ヶ月。

          【Figma】 Excuse me! ふぃぐまッテ、ナンデスカ!!

          どもっ! 昨日のクイズの答えは『パンケーキ』でした。いえーぇい🤗 ってそんな場合じゃなーい!!!!!本日の会議でFigmaを今後使用していくことが決まりました。 『へ、、、ふぃぐま?🧸』 なんとなく聞いたことがあるような、ないようなのレベルで、使う時もいつかくるのかな〜なんて呑気に思ってたら急にその日がやって来てしまいました!! 『Figmaとはなに?』という仲間に、ほんのりご紹介。 だそうです。🧸 要するに、 みんなで共有できて、 無料で、 ブラウザ(Googleと

          【Figma】 Excuse me! ふぃぐまッテ、ナンデスカ!!

          【Youtube】大人気企画#イラレでクッキング番外編!『ほんとはめっちゃ難しいんじゃないの?🥞』スペシャル。

          ども🌸 まだマクドの抹茶黒蜜わらびもちパイを食べれてないくぼです。 あー今日行こうと思ったのに!ポテトだってLサイズが今だけ250円なのに! 明日の仕事帰りに絶対行こう。と思いながらブログ書いてます。 お知らせですよぉ〜!前回のイラレでクッキングの番外編がでました! 株式会社Webis→Youtubeはこちら 前回の分も見たよ!と言って頂けたり、いいね!👍もほんとに励みになります。 Xにてまだまだ#イラレでクッキング の参加者募集しております!(大声) いかに簡単に手数少

          【Youtube】大人気企画#イラレでクッキング番外編!『ほんとはめっちゃ難しいんじゃないの?🥞』スペシャル。

          【#バナーお題】ダメ出しこそ上手くなる近道だ!!

          どもっ。 みなさんお元気ですか? 春ですね。 愛犬のきっちゃんが春毛になってきたのでそろそろだなっと思っております。 この写真おもしろすぎません?(笑) ワイワイガヤガヤ勉強会!さて、前回のバナーお題について勉強会が行われました。 自分の制作物を人に見ていただくのはドキドキします。みんなの制作物を見るのは勉強になりますね。 『あ、こうやって作るんだ』とか『同じお題でもこんなに変わるんだ』っていう気づきは大切ですし視野も広がります。 そして、自分てまだまだだな〜もっと上手くな

          【#バナーお題】ダメ出しこそ上手くなる近道だ!!

          【♯バナーお題】独学の私はこうやって制作してます。

          どうもっ。前回の記事スキ❤︎頂けてうれしいです。 あれから急激な恥ずかしさと、やる気に満ちた感情の間で変な笑みが2日ほど続きました。(照) youtubeで♯イラレでクッキングの番外編もでます!是非みてください! 今回は、こばやす#バナーお題 第2弾 温泉旅館3大特典アピールに挑戦していこうと思います。 独学でデザインを勉強してる私がどう制作していくのかまとめてみました。 絶対もっといい方法あるよな、、、と日々模索中です。 お題の内容できあがりがこちら!どどんっ!!反省点

          【♯バナーお題】独学の私はこうやって制作してます。