kirei__coding's profile picture. デザイン再現に強いコーディング代行サービス【Kireiコーディング】を運営してるキレコちゃんです🌷「外注したけどキレイに上がってこない...」「修正手配など無駄な時間が増え効率が悪い…」「レイアウト崩れや細かなミスが多い…」などのお悩みは全てKireiコーディングが解決しちゃうよ!お気軽にご相談ください☺️

キレコちゃん@コーディング代行

@kirei__coding

デザイン再現に強いコーディング代行サービス【Kireiコーディング】を運営してるキレコちゃんです🌷「外注したけどキレイに上がってこない...」「修正手配など無駄な時間が増え効率が悪い…」「レイアウト崩れや細かなミスが多い…」などのお悩みは全てKireiコーディングが解決しちゃうよ!お気軽にご相談ください☺️

【キレコちゃんの豆知識*CSS編💡】 CSS「display:contents」をご紹介🌟 ✅これを指定された要素は階層構造から認識されなく👏 ✅DOM構造を崩すことなくFlexboxなどのレイアウトをより柔軟に組めるようになる😆 ※あくまで要素が持つテキストや疑似要素は消えないので注意! #コーディング #CSS

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
CSS「display:contents」をご紹介🌟

✅これを指定された要素は階層構造から認識されなく👏
✅DOM構造を崩すことなくFlexboxなどのレイアウトをより柔軟に組めるようになる😆
※あくまで要素が持つテキストや疑似要素は消えないので注意!

#コーディング #CSS
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
CSS「display:contents」をご紹介🌟

✅これを指定された要素は階層構造から認識されなく👏
✅DOM構造を崩すことなくFlexboxなどのレイアウトをより柔軟に組めるようになる😆
※あくまで要素が持つテキストや疑似要素は消えないので注意!

#コーディング #CSS
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
CSS「display:contents」をご紹介🌟

✅これを指定された要素は階層構造から認識されなく👏
✅DOM構造を崩すことなくFlexboxなどのレイアウトをより柔軟に組めるようになる😆
※あくまで要素が持つテキストや疑似要素は消えないので注意!

#コーディング #CSS
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
CSS「display:contents」をご紹介🌟

✅これを指定された要素は階層構造から認識されなく👏
✅DOM構造を崩すことなくFlexboxなどのレイアウトをより柔軟に組めるようになる😆
※あくまで要素が持つテキストや疑似要素は消えないので注意!

#コーディング #CSS

【キレコちゃんの豆知識*CSS編💡】 CSSプロパティ「clip-path」をご紹介🌟 ✅画像や要素をカスタムの形状にクリップ可能👏 ✅円形、多角形、不規則な形状まで対応できる😆 下記で画像を円形にクリップすることができます! clip-path: circle(50% at 50% 50%); #コーディング #CSS #Web制作

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】 
CSSプロパティ「clip-path」をご紹介🌟

✅画像や要素をカスタムの形状にクリップ可能👏
✅円形、多角形、不規則な形状まで対応できる😆

下記で画像を円形にクリップすることができます! 
clip-path: circle(50% at 50% 50%);

#コーディング #CSS  #Web制作
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】 
CSSプロパティ「clip-path」をご紹介🌟

✅画像や要素をカスタムの形状にクリップ可能👏
✅円形、多角形、不規則な形状まで対応できる😆

下記で画像を円形にクリップすることができます! 
clip-path: circle(50% at 50% 50%);

#コーディング #CSS  #Web制作

【キレコちゃんの豆知識*CSS編💡】 CSSプロパティ「overscroll-behavior-y」をご紹介🌟 ✅スクロール可能なコンテンツ(スクロールコンテナー)を端までスクロールした時の動作を制御できる👏 ✅是非活用して、UIに特化したサイトを制作しよう😆 #コーディング #エンジニア #Web制作


【キレコちゃんの豆知識編💡】 フォトショップのAI画像生成をご紹介🌟 ✅画像の縦横比が全く違うけどトリミングもする余白もないような時に解決✨ ✅その方法は⌘+⌥+cから幅と高さ指定→余白部分を選択ツールで指定→生成ぬりつぶしから生成を押すとAIが余白を保管した内容で埋めてくれる👏 #AI


【キレコちゃんの小ワザ*VSCode編💡】 エディタのスペースを広く使う方法をご紹介🌟 ✅一瞬で開閉できるためストレスなく、作業スペースを確保できる👏 ✅以下のコマンドで可能✨ command + B でフォルダの開閉 command + J でターミナルの開閉 #コーディング #エンジニア #Web制作


【キレコちゃんの豆知識*CSS編💡】 CSSプロパティ「scroll-snap-type」をご紹介🌟 ✅JavaScriptなしで、スクロールした時に画面1枚ずつスクロールできる✨ ✅縦にも横にも調整可能なので、様々な実装ができる👏 是非試しを😆 #コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい


【キレコちゃんの豆知識*CSS編💡】 CSSで使用できる「svh, lvh, dvh」をご紹介🌟 ✅スマホでのスクロール時にアドレスバーが動くことによって狂ってしまうvhの高さの基準を制御できる✨ ✅覚えておくと実機確認で悩まされることがまた一つ減るかも😆 #コーディング #エンジニア #Web制作


【キレコちゃんの豆知識*CSS編💡】 CSSの擬似クラス「:not」をご紹介🌟 ✅特定の要素にはstyleを当てたくない時に使える✨ ✅「:last-child」も指定できるので、最後の要素だけmargin-bottomを当てたくない場合にも使える👏 ✅コードを短くできる😆 #コーディング #エンジニア #Web制作

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
CSSの擬似クラス「:not」をご紹介🌟

✅特定の要素にはstyleを当てたくない時に使える✨
✅「:last-child」も指定できるので、最後の要素だけmargin-bottomを当てたくない場合にも使える👏
✅コードを短くできる😆

#コーディング #エンジニア #Web制作
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
CSSの擬似クラス「:not」をご紹介🌟

✅特定の要素にはstyleを当てたくない時に使える✨
✅「:last-child」も指定できるので、最後の要素だけmargin-bottomを当てたくない場合にも使える👏
✅コードを短くできる😆

#コーディング #エンジニア #Web制作

【キレコちゃんの豆知識*CSS編💡】 cssプロパティ「font-feature-settings」をご紹介🌟 ✅「」などの役物の隙間を詰めることが可能👏 ✅デザインの再現性UP😆 ✅対応していないフォントもあるので注意✨ #コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
  cssプロパティ「font-feature-settings」をご紹介🌟

✅「」などの役物の隙間を詰めることが可能👏
✅デザインの再現性UP😆
✅対応していないフォントもあるので注意✨

#コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

【キレコちゃんの小ワザ*VSCode編】 VSCodeでショートカットを設定する方法を紹介🌟 ✅キーボードショートカットを選択→ワード検索→変更したいコマンドを選択、編集するだけ✨ ✅もっと細かい設定なども出来るので興味がある方はより詳しく調べてみて😆 #コーディング #エンジニア #Web制作

kirei__coding's tweet image. 【キレコちゃんの小ワザ*VSCode編】  
VSCodeでショートカットを設定する方法を紹介🌟

✅キーボードショートカットを選択→ワード検索→変更したいコマンドを選択、編集するだけ✨
✅もっと細かい設定なども出来るので興味がある方はより詳しく調べてみて😆

#コーディング #エンジニア #Web制作
kirei__coding's tweet image. 【キレコちゃんの小ワザ*VSCode編】  
VSCodeでショートカットを設定する方法を紹介🌟

✅キーボードショートカットを選択→ワード検索→変更したいコマンドを選択、編集するだけ✨
✅もっと細かい設定なども出来るので興味がある方はより詳しく調べてみて😆

#コーディング #エンジニア #Web制作
kirei__coding's tweet image. 【キレコちゃんの小ワザ*VSCode編】  
VSCodeでショートカットを設定する方法を紹介🌟

✅キーボードショートカットを選択→ワード検索→変更したいコマンドを選択、編集するだけ✨
✅もっと細かい設定なども出来るので興味がある方はより詳しく調べてみて😆

#コーディング #エンジニア #Web制作

【キレコちゃんの豆知識*CSS編💡】 CSSの疑似要素「:is」をご紹介🌟 ✅複数の要素に同じstyleを指定する際に便利✨ ✅「,」で区切る方法をより可読性向上と記述量の削減に利用する事が可能👏 是非試しを😆 #コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
CSSの疑似要素「:is」をご紹介🌟

✅複数の要素に同じstyleを指定する際に便利✨
✅「,」で区切る方法をより可読性向上と記述量の削減に利用する事が可能👏

是非試しを😆

#コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

【キレコちゃんの豆知識*CSS編💡】 cssだけで画像をトリミングする方法をご紹介🌟 ✅テキストに合わせて画像を切り抜ける✨ ✅下記の3つだけでトリミングが可能👏 background-image: url(); -webkit-background-clip: text; color: transparent; #コーディング #エンジニア #Web制作

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
cssだけで画像をトリミングする方法をご紹介🌟

✅テキストに合わせて画像を切り抜ける✨
✅下記の3つだけでトリミングが可能👏
background-image: url();
 -webkit-background-clip: text; 
color: transparent;

#コーディング #エンジニア #Web制作
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
cssだけで画像をトリミングする方法をご紹介🌟

✅テキストに合わせて画像を切り抜ける✨
✅下記の3つだけでトリミングが可能👏
background-image: url();
 -webkit-background-clip: text; 
color: transparent;

#コーディング #エンジニア #Web制作

【キレコちゃんの豆知識編💡】 次世代の超優秀な画像形式AVIFをご紹介🌟 ✅2019年生まれのAVIFは、pngのように透過、gifのようにアニメが可能👏 ✅jpgより色彩豊かで、軽量と言われているwebpよりも軽量というとんでも形式😆 #制作会社 #Web制作 #AVIF #エンジニア

kirei__coding's tweet image. 【キレコちゃんの豆知識編💡】 
次世代の超優秀な画像形式AVIFをご紹介🌟

✅2019年生まれのAVIFは、pngのように透過、gifのようにアニメが可能👏
✅jpgより色彩豊かで、軽量と言われているwebpよりも軽量というとんでも形式😆

#制作会社 #Web制作 #AVIF #エンジニア

【キレコちゃんの小ワザ*VSCode編】 VSCode拡張機能の「WordPress Snippet」を紹介🌟 ✅WordPressの関数を予測で教えてくれる👏 ✅「the_」などを入力すればWordPressの関数を候補で出してくれるので、検索して調べる時間を短縮できる✨ #コーディング #Web制作 #Web制作会社と繋がりたい

kirei__coding's tweet image. 【キレコちゃんの小ワザ*VSCode編】 
VSCode拡張機能の「WordPress Snippet」を紹介🌟

✅WordPressの関数を予測で教えてくれる👏
✅「the_」などを入力すればWordPressの関数を候補で出してくれるので、検索して調べる時間を短縮できる✨

#コーディング  #Web制作 #Web制作会社と繋がりたい

【キレコちゃんの豆知識*CSS編💡】 cssプロパティ「drop-shadow」をご紹介🌟 ✅背景が透明なpng,svgを画像にあわせて影をつけることができる👏 ✅画像自体に影がつくので、デザインの幅が広がる✨ #コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
 cssプロパティ「drop-shadow」をご紹介🌟

✅背景が透明なpng,svgを画像にあわせて影をつけることができる👏
✅画像自体に影がつくので、デザインの幅が広がる✨

#コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
 cssプロパティ「drop-shadow」をご紹介🌟

✅背景が透明なpng,svgを画像にあわせて影をつけることができる👏
✅画像自体に影がつくので、デザインの幅が広がる✨

#コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

【キレコちゃんの豆知識編】 ChatGPT Plusで画像生成の機能が導入されましたのでご紹介🌟 ✅DALL-E3という画像生成AIを、ChatGPTを通して使用可能👏 ✅画像が必要になった際に以前より簡単に画像を作成できるようになる✨ 是非お試しを😆 #ChatGPT #画像生成AI #エンジニア #Web制作 #コーディング

kirei__coding's tweet image. 【キレコちゃんの豆知識編】
ChatGPT Plusで画像生成の機能が導入されましたのでご紹介🌟

✅DALL-E3という画像生成AIを、ChatGPTを通して使用可能👏
✅画像が必要になった際に以前より簡単に画像を作成できるようになる✨

是非お試しを😆

#ChatGPT #画像生成AI #エンジニア #Web制作 #コーディング
kirei__coding's tweet image. 【キレコちゃんの豆知識編】
ChatGPT Plusで画像生成の機能が導入されましたのでご紹介🌟

✅DALL-E3という画像生成AIを、ChatGPTを通して使用可能👏
✅画像が必要になった際に以前より簡単に画像を作成できるようになる✨

是非お試しを😆

#ChatGPT #画像生成AI #エンジニア #Web制作 #コーディング
kirei__coding's tweet image. 【キレコちゃんの豆知識編】
ChatGPT Plusで画像生成の機能が導入されましたのでご紹介🌟

✅DALL-E3という画像生成AIを、ChatGPTを通して使用可能👏
✅画像が必要になった際に以前より簡単に画像を作成できるようになる✨

是非お試しを😆

#ChatGPT #画像生成AI #エンジニア #Web制作 #コーディング
kirei__coding's tweet image. 【キレコちゃんの豆知識編】
ChatGPT Plusで画像生成の機能が導入されましたのでご紹介🌟

✅DALL-E3という画像生成AIを、ChatGPTを通して使用可能👏
✅画像が必要になった際に以前より簡単に画像を作成できるようになる✨

是非お試しを😆

#ChatGPT #画像生成AI #エンジニア #Web制作 #コーディング

【キレコちゃんの小ワザ*VSCode編】 VSCodeの「Code Spell Checker」を紹介🌟 ✅スペルミスしている箇所を青色の波線で教えてくれる✨ ✅コードはスペルが一文字違うだけでエラーになってしまうため、エラーを防ぐことができる👏 #コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

kirei__coding's tweet image. 【キレコちゃんの小ワザ*VSCode編】
 VSCodeの「Code Spell Checker」を紹介🌟

✅スペルミスしている箇所を青色の波線で教えてくれる✨
✅コードはスペルが一文字違うだけでエラーになってしまうため、エラーを防ぐことができる👏

#コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

【キレコちゃんの豆知識*CSS編💡】 cssプロパティ「linear-gradient」をご紹介🌟 ✅疑似要素で指定する必要なし👏 ✅backgroundのショートハンド「linear-gradient」で使用することで短いコードで済む✨ #コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
cssプロパティ「linear-gradient」をご紹介🌟

✅疑似要素で指定する必要なし👏
✅backgroundのショートハンド「linear-gradient」で使用することで短いコードで済む✨

#コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい
kirei__coding's tweet image. 【キレコちゃんの豆知識*CSS編💡】
cssプロパティ「linear-gradient」をご紹介🌟

✅疑似要素で指定する必要なし👏
✅backgroundのショートハンド「linear-gradient」で使用することで短いコードで済む✨

#コーディング #エンジニア #Web制作 #Web制作会社と繋がりたい

【キレコちゃんの小ワザ*ツール編】 Google拡張機能の「Perfect Pixel」を紹介🌟 ✅サイトとデザインの差異を簡単に確認可能にするツール👏 ✅制作物と見本を重ねた状態で視覚的にズレが一目瞭然✨ ✅使用方法はツール追加、起動、画像アップ、位置調整だけ🌟 #コーディング #エンジニア #Web制作

kirei__coding's tweet image. 【キレコちゃんの小ワザ*ツール編】 
Google拡張機能の「Perfect Pixel」を紹介🌟

✅サイトとデザインの差異を簡単に確認可能にするツール👏
✅制作物と見本を重ねた状態で視覚的にズレが一目瞭然✨
✅使用方法はツール追加、起動、画像アップ、位置調整だけ🌟

#コーディング #エンジニア #Web制作
kirei__coding's tweet image. 【キレコちゃんの小ワザ*ツール編】 
Google拡張機能の「Perfect Pixel」を紹介🌟

✅サイトとデザインの差異を簡単に確認可能にするツール👏
✅制作物と見本を重ねた状態で視覚的にズレが一目瞭然✨
✅使用方法はツール追加、起動、画像アップ、位置調整だけ🌟

#コーディング #エンジニア #Web制作
kirei__coding's tweet image. 【キレコちゃんの小ワザ*ツール編】 
Google拡張機能の「Perfect Pixel」を紹介🌟

✅サイトとデザインの差異を簡単に確認可能にするツール👏
✅制作物と見本を重ねた状態で視覚的にズレが一目瞭然✨
✅使用方法はツール追加、起動、画像アップ、位置調整だけ🌟

#コーディング #エンジニア #Web制作
kirei__coding's tweet image. 【キレコちゃんの小ワザ*ツール編】 
Google拡張機能の「Perfect Pixel」を紹介🌟

✅サイトとデザインの差異を簡単に確認可能にするツール👏
✅制作物と見本を重ねた状態で視覚的にズレが一目瞭然✨
✅使用方法はツール追加、起動、画像アップ、位置調整だけ🌟

#コーディング #エンジニア #Web制作

【キレコちゃんの小ワザ*VSCode編】 VSCodeの複数選択を紹介🌟 ✅選択したい範囲の縦一列にカーソルを置くことができる👏 ✅最初にカーソルが置かれた状態でcommand + optionを押しながらクリックすると縦一列にカーソルを置くことができる✨ #コーディング #エンジニア #Web制作


United States 트렌드

Loading...

Something went wrong.


Something went wrong.