HIROCODE.

HIROCODE.

351
5 209 992

Подписаться

Hello, I'm Hiro 🙆‍♂️
Thank you for watching the video ❗️

This channel introduces the skills and knowledge that web designers need.
We will deliver videos of indispensable contents for web designers and front-end engineers, such as learning methods in web design and coding with HTML / CSS, tips, etc. ☺️ ♪
I think there are many points that cannot be reached, but I would be happy if I could study with you.

【2024最新】30分マスター講座 Figmaの基本と便利な使い方！ | WEBデザインツール

27:18

【2024最新】30分マスター講座 Figmaの基本と便利な使い方！ | WEBデザインツール

5 месяцев назад

【スタック式ペースト】Paste ペイストで圧倒的コピペ効率化。

8:42

【スタック式ペースト】Paste ペイストで圧倒的コピペ効率化。

7 месяцев назад

【8分でマスター】CSS変数（カスタムプロパティ）の基本と便利な使い方。

8:14

【8分でマスター】CSS変数（カスタムプロパティ）の基本と便利な使い方。

7 месяцев назад

CSS新機能「Subgrid サブグリッド」の使い方！

9:33

CSS新機能「Subgrid サブグリッド」の使い方！

7 месяцев назад

GPT4搭載！AIコードエディタ「Cursor（カーソル）」の使い方

10:31

GPT4搭載！AIコードエディタ「Cursor（カーソル）」の使い方

7 месяцев назад

【CSS新機能】コンテナクエリ@containerの使い方と実例紹介！

9:23

【CSS新機能】コンテナクエリ@containerの使い方と実例紹介！

8 месяцев назад

Sassを使って便利にレスポンシブ対応！メディアクエリの指定方法。

13:18

Sassを使って便利にレスポンシブ対応！メディアクエリの指定方法。

9 месяцев назад

CSSに新機能！スクロールに連動してスタイルを変化「Scroll-driven Animations（スクロールドリブンアニメーションズ）」

8:33

CSSに新機能！スクロールに連動してスタイルを変化「Scroll-driven Animations（スクロールドリブンアニメーションズ）」

9 месяцев назад

50行で完成！行と列固定のテーブルを作るCSSチュートリアル【HTML/CSS/Sass】

10:37

50行で完成！行と列固定のテーブルを作るCSSチュートリアル【HTML/CSS/Sass】

9 месяцев назад

40行で完成！ハンバーガーメニューを作るCSSチュートリアル【HTML/CSS/Sass/JS】

18:15

40行で完成！ハンバーガーメニューを作るCSSチュートリアル【HTML/CSS/Sass/JS】

10 месяцев назад

HTML CSSでSVGをプロ級に使うための2つの実用的な方法

13:30

HTML CSSでSVGをプロ級に使うための2つの実用的な方法

10 месяцев назад

【ワンランク上を目指す！】WEBデザイナー向けUdemyオススメ講座 5選

12:13

【ワンランク上を目指す！】WEBデザイナー向けUdemyオススメ講座 5選

10 месяцев назад

【新発見!?】HTMLで飛び出した要素を効果的に指定する方法！

5:14

【新発見!?】HTMLで飛び出した要素を効果的に指定する方法！

11 месяцев назад

ChatGPTにWEBデザイン任せた結果...

24:48

ChatGPTにWEBデザイン任せた結果...

11 месяцев назад

hoverしたら表示されるtooltipの作り方 #shorts

1:01

hoverしたら表示されるtooltipの作り方 #shorts

11 месяцев назад

HTML CSSでマリオを作る。

17:32

HTML CSSでマリオを作る。

Год назад

Figma新機能「オートレイアウト折り返し・最小幅・最大幅」

8:01

Figma新機能「オートレイアウト折り返し・最小幅・最大幅」

Год назад

【スキルアップ】Figmaを極めろ！実践的なFigmaの使い方

18:54

【スキルアップ】Figmaを極めろ！実践的なFigmaの使い方

Год назад

一番ヤバい、超最先端画像編集AI登場!【Drag Your GAN（ドラッグユアガン）】

5:29

一番ヤバい、超最先端画像編集AI登場!【Drag Your GAN（ドラッグユアガン）】

Год назад

Macbookを蘇らせる「CleanMyMac X」の使い方。

10:19

Macbookを蘇らせる「CleanMyMac X」の使い方。

Год назад

デザイン生成AIツール「 Microsoft Designer」の実力とは？

5:20

デザイン生成AIツール「 Microsoft Designer」の実力とは？

Год назад

【誰でもできる！】ChatGPTとMidjourneyで超リアルな画像生成をする方法。

8:06

【誰でもできる！】ChatGPTとMidjourneyで超リアルな画像生成をする方法。

Год назад

AIによってWebデザイナーの仕事はなくなるのか？！

9:23

AIによってWebデザイナーの仕事はなくなるのか？！

Год назад

【画像生成】AIによるWebデザインがヤバい。Midjourney

11:07

【画像生成】AIによるWebデザインがヤバい。Midjourney

Год назад

無料自動コーディングAIツール「Amazon Codewhisperer」の使い方。Github Copilotとの比較も。

10:06

無料自動コーディングAIツール「Amazon Codewhisperer」の使い方。Github Copilotとの比較も。

Год назад

Adobeの画像生成AI「Firefly - ファイアフライ」ベータ版使ってみた！

10:42

Adobeの画像生成AI「Firefly - ファイアフライ」ベータ版使ってみた！

Год назад

【自動コーディング】GitHub Copilotの使い方とXで進化すること。【GPT-4】

15:37

【自動コーディング】GitHub Copilotの使い方とXで進化すること。【GPT-4】

Год назад

【Adobe アドビ】AIツール「Firefly - ファイアフライ」で出来る24のこと。

8:12

【Adobe アドビ】AIツール「Firefly - ファイアフライ」で出来る24のこと。

Год назад

【ChatGPT】エクセルやパワポがAI化「Copilot（コパイロット）」の5つの特徴。

5:01

【ChatGPT】エクセルやパワポがAI化「Copilot（コパイロット）」の5つの特徴。

Год назад

Комментарии

@user-kx7jz8gf2c День назад

たすかる

@hirocode День назад

ありがとうございます😆❗️

@user-fguhiasvhjvbajkfjkbnas День назад

Figmaでフレームを4等分して、その4等分した点とオブジェクトの中心を合わせてレイアウトすることはできますか? わかりにくい文ですみません。また、こういうアニメーションは作れますか? drive.google.com/file/d/1M3lyNDB0Mu89N7tnoiuwq-t0m-MhLcxZ/view?usp=drivesdk

@user-ny1bn4xb8f 2 дня назад

むずい

@hirocode День назад

グリッドレイアウトは少し難しいので、基本から順々に学んでいくのがオススメです☺️❗️

@user-ef2pf7fw6z 3 дня назад

関係ないけどタイピングの音が心地良いです😂❤

@hirocode День назад

ありがとうございます😆❗️❗️

@KoenigWolfoffice 3 дня назад

機能一つ紹介のショートがあったらより伸びるかもしれません

@hirocode День назад

それやってみます🤯❗️ありがとうございます🙇‼️

@omikodojo 3 дня назад

本当にいつも色んなことを学ばせていただき頭が上がりません。 Webデザイン関係の動画投稿者の色んな方の動画を拝見させていただいておりますが私的にナンバーワンです。伝え方、見やすさが特に優れていて今は違う動画がみたいなという時でもちょっと覗いてみようかなとなり、後で自分で試してみようとまた同じ動画を見てしまう程です。定期投稿続いてくれたら嬉しいです😭

@hirocode 3 дня назад

そんな嬉しすぎるお言葉いただけてこちらとしても投稿している甲斐があります😭❗️より参考になるような動画出し続けられるように頑張ります🙇❗️❗️❗️

@rs2011 3 дня назад

すっごいって、思いましたが何で背景消しましたか？ツールなど教えていただければ！

@hirocode 3 дня назад

手っ取り早く削除したい時は、Adobe expressの背景削除使ってます😆❗️adobe 背景削除で検索して、画像アップすれば切り抜かれます❗️

@rs2011 4 дня назад

すいません、remを使う時はパソコン画面にvwを入れてますでしょうか？

@hirocode 3 дня назад

コメントありがとうございます😆❗️ remはhtmlのフォントサイズを基準とする単位です❗️デフォルト16pxで、htmlのフォントサイズ変更するとremで指定した箇所サイズも変化します。 vwは画面幅の指定なので、また別の話になるかと思われます🤔

@rs2011 3 дня назад

@@hirocode そうなんですね！他の企業のホームページをみたらパソコンサイズからルートに6vwと書かれててそれ以降は、全て単位はremで指定されてたので気になってました！ありがとうございます！

@user-rz6zi4wc9j 5 дней назад

質問なのですが、コンストレインツという項目がないのですがどうすれば出てきますか？

@hirocode 3 дня назад

今は、「制約」という言葉になっていて、フレーム内のオブジェクト選択すれば右サイドバーに表示されます❗️

@user-rz6zi4wc9j 3 дня назад

制約もないんです。デザインの方にもプロトタイプの方にもありません。無料版だからでしょうか？

@user-kg9sv1jj9j 5 дней назад

SVGの前動画のお陰でめちゃくちゃ助かりました…いつもいい動画ありがとうございます！

@hirocode 3 дня назад

嬉しいです😆こちらこそありがとうございます🙇❗️

@田中課金族 5 дней назад

SVGって何だ？（論外）

@hirocode 5 дней назад

普段から使ってないとなかなか聞きなれないですよね😅笑

@s1204IT 5 дней назад

こんな機能あったんだ... よく見つけますね

@hirocode 5 дней назад

ありがとうございます😆❗️

@megu5236 5 дней назад

鳥肌立ちました‼️

@hirocode 5 дней назад

ありがとうございます😆❗️

@kaz_0707 5 дней назад

フロントエンドあんまやらないけどすげえ便利そうだからチャンネル登録しとくわ

@hirocode 5 дней назад

嬉しいです😆❗️ありがとうございます🙇

@honokaak8425 5 дней назад

いつも動画見てます。質問があります。例えばメインビジュアル写真から下のアバウトの文字までの距離などどのようにしたらいいですか？いつも数値がわからず8の倍数にしてます。又プロフィール画像のサイズの数値などもどのように考えればいいですか？

@hirocode 3 дня назад

いつもご視聴いただきありがとうございます😊♪そこらへんのバランスは正直決まりがなく感覚です💦 デザインによりけりですが80~100pxくらいで設定することが多いです🤔 似たような雰囲気のサイト参考にするのが一番手っ取り早いかもです😆❗️

@user-pz8kg8fu8o 6 дней назад

コメント失礼します！動画の方法でサイトアップロード後、ファイルの修正(HTML、CSS、Java Script、php等)を行った場合、再アップロードが必要でしょうか？もしくは、自動で反映されるのでしょうか？ご回答よろしくお願いします。 p.s. もしよろしければロリポップ契約、ムームードメイン契約の最新バージョンの動画をアップロードいただけると幸いです。ご検討よろしくお願いします。

@hirocode 3 дня назад

コメントありがとうございます🙇！自動では反映されないので、再度ローカルからサーバーにアップする必要があります！おっしゃる通りこの動画もう2年経つので新しい動画検討してみます🙇‍♀️❗️

@user-bc5eu8sw3k 6 дней назад

めっちゃわかりやすかったです！！！

@hirocode 6 дней назад

そう言っていただけて嬉しいです😆❗️ありがとうございます🙇❗️

@user-ky9qi9mv3j 7 дней назад

オートレイアウトとは関係がないのですが、ヒロさんの動画をみていてこれいいな！って思ったフォントがあって調べたら、２つ同じようなものが出てきました。 MOBOとA1ゴシックです。どちらを使われていますか？もし、どちらとも使われているのであれば、どっちの方がよく使いますか？

@hirocode 6 дней назад

コメントありがとうございます😆❗️ おっしゃる通りその2つのフォントは似ているで有名で、A1ゴシックは有料フォントMOBOは無料フォントです！僕は無料のMOBOを使ってます😊❗️

@user-ky9qi9mv3j День назад

@@hirocode わかりました！ありがとうございます。

@user-bx2ir8fx8k 8 дней назад

おおおおおおおおおおおお

@hirocode 7 дней назад

コメントありがとうございます😆❗️

@user-sabasabpsabasabasabasaaba 8 дней назад

これでなんでワイズになるんやろ

@user-kl4mp7fe5b 8 дней назад

要素の置き換えが元の要素をコピーした上でCmd、Shift、R押したけどできないんですが理由があるのですか？

@hirocode 8 дней назад

コメントありがとうございます😆❗️ 仕様は変わってないので、おそらく入力ミスの可能性が高いです🤔 cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか❓ また、右クリックから「貼り付けて置換」で同様の操作が実行されるので、こちらも合わせて使用したら原因わかるかもです❗️❗️

@user-kl4mp7fe5b 8 дней назад

@@hirocode cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか＜これ試したけどさっきと同じ様に要素の名前変更にしかなりませんでした貼り付けて置換とは右クリックした後にどこに出て来るのでしょうか(未だ出てこないので)？

@hirocode 8 дней назад

cmd+r がリネームのショートカットなので、shiftキーが正しく効いていないようです🤔 オブジェクトを右クリック（通常のクリックでなく右クリックです。デスクトップでの右クリックと同様にコンテキストメニューが表示されます）すると、上から、コピー・ここに貼り付けに続けて3つ目に表示されます！レイヤーを右クリックした場合、上から2つ目に表示されます。

@user-kl4mp7fe5b 8 дней назад

@@hirocode コマンドとオプションと押したらできました！わざわざありがとうございます

@KT-xs1qm 9 дней назад

Windows版の説明ではないので、参考にならない・・・・

@kaolatte 9 дней назад

使ってみたが、画面数が多いと、固まってしまって使えなかった

@user-gs1iu8vo5z 10 дней назад

ありがとうございます！

@hirocode 10 дней назад

こちらこそありがとうございます😆❗️

@ym5438 10 дней назад

何番目のclassの指定ができるんですねこれは使える！ありがとうございます

@hirocode 10 дней назад

クラス指定できるの良いですよね😆❗️

@kuzukinoko 11 дней назад

class名つけたらダメなの？

@hirocode 11 дней назад

おっしゃる通り、基本形にはクラス名付与してスタイリングが良いです❗️ただ、エディタ投稿など個別にクラス付与できない際にnth使う選択肢が出てくるのかなと思います💡

@yas-156 11 дней назад

ハイフンネーション？hyphenationのことなら「ハイフォネーション」あるいは「ハイフネーション」

@hirocode 11 дней назад

おっしゃる通りで前にも同じ指摘いただきました😅 ハイフネーションの間違いです🙇❗️

@JamesLJohnson_ 11 дней назад

ということは :nth-child(2) と p:nth-child(2) は同じということ？

@hirocode 11 дней назад

:nth-child(2)はタグを指定してないので、2つ目の要素がどのタグだろうとスタイルが適用されます。p:nth-child(2)だと、2つ目の要素かつpタグであればスタイルが適用されるって感じです😊❗️

@T_yu6129 11 дней назад

まあnthof typeでいいな。

@hirocode 11 дней назад

nth-of-typeでもクラス名でカウントできないので、そういった場合は使えるかもです💡 正直nth使う機会かなかな少ないですよね😅

@showtime1998 11 дней назад

nth-child、nth-of-typeは未だにごっちゃになります…😂😂😂

@hirocode 11 дней назад

めちゃ分かります🤣❗️ childはその名の通り子要素の数でカウント、typeはタグの種類でカウントって感じですね🫡

@uzurauzura 12 дней назад

いつも動画で勉強させていただいております。こちらにコメントして良いかわからないのですが、もしよろしければご回答いただけますと幸いです。 WPで直接エディターの編集となるとさまざまな不便さがあるので、ローカル環境でVS CODEエディターを用いて編集しています。（模写コーディングぐらいなら、簡単なディレクトリ構成なのでエディターですぐ作業できるのですが）作業結果を都度ローカルで確認したいのですが、作成したものをわざわざFTPにアップとなると手間になります・・・なのでローカル環境でWPと同じディレクトリー構成を作りたいのですが、複雑でどうしたら良いかネットでも調べても出てきません。

@hirocode 12 дней назад

コメントありがとうございます🙇 すみません、直接の解決につながるか分かりかねますが、【簡単】WordPressをローカル環境で！ワードプレスのインストール方法も！って動画あげてて、この方法であればローカルでワードプレス動かすことが可能です💡

@uzurauzura 5 дней назад

@@hirocode お礼が遅くなり申し訳ございません。ご丁寧なご回答ありがとうございました！今後もこちらで勉強させていただきますので、よろしくお願いいたします。

@uzurauzura 12 дней назад

いつも動画を拝見し、勉強になっています。ありがとうございます。こちらに記載して良いかわからないのですが、もし可能でしたら、ご回答いただけますと幸いです。 WPで直接エディターの編集となるとさまざまな不便さがあるので、ローカル環境でエディターを用いて編集しています。（模写コーディングぐらいなら、簡単なディレクトリ構成なのでエディターですぐ作業できるのですが）作業結果を都度ローカルで確認したいのですが、作成したものをわざわざFTPにアップとなると手間になります・・・なのでローカル環境でWPと同じディレクトリー構成を作りたいのですが、複雑でどうしたら良いかネットでも調べても出てきません。

@keeita 12 дней назад

ASMR😊

@hirocode 12 дней назад

ありがとうございます😆❗️

@car_navi 13 дней назад

AI機能が中止になりました。理由はアップルらしいUIデザインになるからだそうです。

@hirocode 12 дней назад

コメントありがとうございます❗️その情報見たんですが、流石にほぼ同じで生成されてたので停止したようですね😅ただ、その点改善してリリース待ちですね💡

@NNN0909-x5x 14 дней назад

有益な情報ありがとうございます！大きさの違う画像を使用する際、大きいサイズの画像に適応しているmax-widthを小さい方に適応したくない場合のCSSの記述はどうなりますか？

@hirocode 12 дней назад

コメントありがとうございます😆 その場合はmedia=で指定したのと同じタイミングで、cssのメディアクエリで指定する形になりそうです❗️

@NicolausCopernicus91 14 дней назад

前にも似たような動画あげてなかった？てか対応ブラウザ知りたい

@いせかる3期はよ 15 дней назад

独学で初めて英語も全く分からんからウィディッチって呼んでたわ笑

@hirocode 14 дней назад

そう読めます笑😂😂😂

@919108971 17 дней назад

この後の可塑性が問題だなぁ

@inui-vo3th 17 дней назад

コメント失礼します。自分はこの動画を見る前にxサーバーにてレンタルサーバーを申し込み独自ドメインを取得したのですが、この動画のvscodeの作業のやり方がわからず詰まっています。ロリポップにおけるSSH情報がxサーバーではどの部分に該当するのかがわからりません。（hostやusername、password、remotePathなどになんの情報を打てばいいかがわからないという感じです）いろいろな情報を入力して試してはいますが、「All configured authentication methods failed」と表示されてしまいます。解決策がありましたら、ご教授いただきたいです。よろしくお願いします。

@user-xv3ds4tx2v 20 дней назад

これが神業というやつですね！😳👏✨

@hirocode 14 дней назад

ありがとうございます😆‼️

@user-hm8kf1wt2n 21 день назад

フロントエンドエンジニアをめざしてる者なのですがこういったAIの進歩を見ると今自分が追いかけている仕事が消えるか不安です。フロントエンドエンジニアの需要はまだまだありますか？？

@T_yu6129 16 дней назад

フロントエンドだけ？多分DB周りの知識もいるしサーバーサイドもある程度出来た方がいい。顧客によってはネットワークとかセキュリティ周りのインフラ関係も整備する事になると思うしそんなもの結局全部出来る人間が今やりたくいからフロントエンドやってる。バックエンドに比べたら異常に求人少ないっしょ？もちろんヒロさんみたいに既に独立してお客さん持ってる方は全然別だと思う。信頼があるからね

@min-hg3nq 22 дня назад

初心者です。ワイヤーフレームはコンポーネント化とかせずにとりあえず見た目を作って、デザインカンプ作るときにコンポーネント化とかオートレイアウトすればいいですか？

@hirocode 14 дней назад

おっしゃる通りです‼️

@happaaa88 23 дня назад

初心者には専門用語が多すぎてついていけませんでした😅

@hirocode 14 дней назад

全体的にざっくりな使い方で申し訳ないです💦

@user-ko4ws2ng1q 23 дня назад

JavaScriptですが、細かく説明して頂けませんか？

@biz-work 23 дня назад

CSS　だけで？

@user-vw8gu5nk3n 23 дня назад

1番わかりやすい動画✨

@hirocode 14 дней назад

ありがとうございます😭‼️

@kayokayo3774 23 дня назад

顔がついてたら可愛いかも…

@hirocode 23 дня назад

面白いアイデア💡😆❗️

@punz.3rd 23 дня назад

素晴らしい！！！！

@hirocode 23 дня назад

凄すぎます😆❗️

@nag_lint_lino 24 дня назад

なおExcelのデータを保存する際にHTMLのフォーマットがあるため、そのまま転記するだけでいいのだ()

@hirocode 23 дня назад

そうなんですね🤯 試してみます❗️

@haruoshimizu6055 24 дня назад

うわー、もっとこれ早く知りたかった！親ごときえず対象のクラスだけが消えるいう所がレスポンシブ特化ですね！ .d-content という汎用クラスを作っておけば便利そう！

@hirocode 23 дня назад

その使い方は便利そうですね😆❗️