- Видео 356
- Просмотров 5 277 203
HIROCODE.
Япония
Добавлен 19 апр 2020
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.
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.
FigmaSlides（フィグマスライド）の使い方
Figma（フィグマ）に新機能「Figma Slides（フィグマスライド）」が追加されました😊♪
スライド専用のファイルを作成して、簡単便利にスライドを作成できます😆❗️
またベータ版の段階ですが、使い勝手や搭載されている機能など一通りレビューしています🎵
🎥 この動画の構成 🎥
00:39 Figma Slides（フィグマスライド）とは？
00:42 ファイルの作成（スライドデッキ）
00:54 テンプレート
01:30 表示モードの切り替え
02:22 テンプレートスタイルの切り替え
03:24 基本ツール
03:34 - テキストツール
03:55 - 画像・動画ツール
04:13 - シェイプツール
04:24 - テーブルツール
04:36 - ライブインタラクション
04:54 - プロトタイプ
05:41 - その他の機能
06:00 デザインモード（有料プラン）
07:00 - AI機能（アクション）
07:22 - 無料プランで使えるAI機能
07:59 アニメーション
08:29 プレゼンテーションモード
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
ruclips.net/user/hirocode
◆ Twitter. ツイッター
hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hiroco...
スライド専用のファイルを作成して、簡単便利にスライドを作成できます😆❗️
またベータ版の段階ですが、使い勝手や搭載されている機能など一通りレビューしています🎵
🎥 この動画の構成 🎥
00:39 Figma Slides（フィグマスライド）とは？
00:42 ファイルの作成（スライドデッキ）
00:54 テンプレート
01:30 表示モードの切り替え
02:22 テンプレートスタイルの切り替え
03:24 基本ツール
03:34 - テキストツール
03:55 - 画像・動画ツール
04:13 - シェイプツール
04:24 - テーブルツール
04:36 - ライブインタラクション
04:54 - プロトタイプ
05:41 - その他の機能
06:00 デザインモード（有料プラン）
07:00 - AI機能（アクション）
07:22 - 無料プランで使えるAI機能
07:59 アニメーション
08:29 プレゼンテーションモード
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
ruclips.net/user/hirocode
◆ Twitter. ツイッター
hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hiroco...
Просмотров: 447
Видео
【2024最新】30分マスター講座 Figmaの基本と便利な使い方！ | WEBデザインツール
Просмотров 77 тыс.6 месяцев назад
【2024最新】30分マスター講座 Figmaの基本と便利な使い方！ | WEBデザインツール
【8分でマスター】CSS変数（カスタムプロパティ）の基本と便利な使い方。
Просмотров 6 тыс.7 месяцев назад
【8分でマスター】CSS変数（カスタムプロパティ）の基本と便利な使い方。
GPT4搭載！AIコードエディタ「Cursor（カーソル）」の使い方
Просмотров 33 тыс.8 месяцев назад
GPT4搭載！AIコードエディタ「Cursor（カーソル）」の使い方
【CSS新機能】コンテナクエリ@containerの使い方と実例紹介！
Просмотров 7 тыс.8 месяцев назад
【CSS新機能】コンテナクエリ@containerの使い方と実例紹介！
CSSに新機能！スクロールに連動してスタイルを変化「Scroll-driven Animations（スクロールドリブンアニメーションズ）」
Просмотров 9 тыс.9 месяцев назад
CSSに新機能！スクロールに連動してスタイルを変化「Scroll-driven Animations（スクロールドリブンアニメーションズ）」
50行で完成！行と列固定のテーブルを作るCSSチュートリアル【HTML/CSS/Sass】
Просмотров 2,8 тыс.10 месяцев назад
50行で完成！行と列固定のテーブルを作るCSSチュートリアル【HTML/CSS/Sass】
40行で完成！ハンバーガーメニューを作るCSSチュートリアル【HTML/CSS/Sass/JS】
Просмотров 10 тыс.10 месяцев назад
40行で完成！ハンバーガーメニューを作るCSSチュートリアル【HTML/CSS/Sass/JS】
【ワンランク上を目指す！】WEBデザイナー向けUdemyオススメ講座 5選
Просмотров 4,8 тыс.11 месяцев назад
【ワンランク上を目指す！】WEBデザイナー向けUdemyオススメ講座 5選
一番ヤバい、超最先端画像編集AI登場!【Drag Your GAN（ドラッグユアガン）】
Просмотров 11 тыс.Год назад
一番ヤバい、超最先端画像編集AI登場!【Drag Your GAN（ドラッグユアガン）】
デザイン生成AIツール「 Microsoft Designer」の実力とは？
Просмотров 9 тыс.Год назад
デザイン生成AIツール「 Microsoft Designer」の実力とは？
【誰でもできる！】ChatGPTとMidjourneyで超リアルな画像生成をする方法。
Просмотров 10 тыс.Год назад
【誰でもできる！】ChatGPTとMidjourneyで超リアルな画像生成をする方法。
無料自動コーディングAIツール「Amazon Codewhisperer」の使い方。Github Copilotとの比較も。
Просмотров 30 тыс.Год назад
無料自動コーディングAIツール「Amazon Codewhisperer」の使い方。Github Copilotとの比較も。
Adobeの画像生成AI「Firefly - ファイアフライ」ベータ版使ってみた！
Просмотров 32 тыс.Год назад
Adobeの画像生成AI「Firefly - ファイアフライ」ベータ版使ってみた！
【自動コーディング】GitHub Copilotの使い方とXで進化すること。【GPT-4】
Просмотров 52 тыс.Год назад
【自動コーディング】GitHub Copilotの使い方とXで進化すること。【GPT-4】
【Adobe アドビ】AIツール「Firefly - ファイアフライ」で出来る24のこと。
Просмотров 37 тыс.Год назад
【Adobe アドビ】AIツール「Firefly - ファイアフライ」で出来る24のこと。
画像ファイルを入れても”ブラウザーを開く”がでてこないのでファイルが読み込めませ💦
改行できますか？
え？プロってこーやって余白調整してるの？ オートレイアウトのパディングから、ライブラリ登録してる数値押した方が良くないですか？
そうやるんだ
makeshop使っている人ってネット知識や商才ある極僅かな人だけじゃないですかね？ まずSEO対策で同業者がたくさんいる中検索で引っかかりやすい所に持っていくとか素人では至難の業。 フリープラン、ビジネスプランもなくなってクジジットカード等いろんな機能つけるとさらに費用が嵩む中かなり売れる商材と知識が無いとなかなか元が取れない。
す…すごい…コード絵師…
参考にします！！
ありがとうございます😆❗️
わかりやすくて助かっております！コンポーネント動画も楽しみにしております！
ボーダーカラーの初期値はcurrentColorだから指定する必要はねぇだろ…
ほんとですね😲❗️
知らなかった… めちゃめちゃ便利ですね😮
ありがとうございます😆❗️
Can you explain me any english
Here's how to use the <symbol> tag in HTML to call SVG images. When you load SVG images with the <img> tag, you cannot change the fill or stroke properties. However, by using the <symbol> tag, you can modify these properties.
T字型やL字型や、飛び地があるとスタイルが一気に崩れるのですが、指定する時は必ず四角形にしなければならないと言った制約があるんでしょうか？
必ず四角いエリアにする必要あります🙇❗️
Z軸があるんだ！
そうです！z-indexプロパティでZ軸方向の順序を指定できます😆❗️
すごい
ありがとうございます😊❗️
文字を入力するとたまに入力ができない時やクリックした後にクリックを解除したのにハイライトが勝手についてくるあるのですが何か理由があるのでしょうか？
コメントありがとうございます❗️僕の環境だとFigma使っていてそういった症状が出たことないので、おそらく使用環境が影響してる可能性が高そうです🤔
詳しい説明が楽しみです！
ありがとうございます😆❗️
なんて凄いんだろう、。とにかく凄い！
ほんと凄すぎて🤯
初心者なんですけど、calcの-10vwってどこかを計算して出したんですか？
10vwなので、1200px幅の画面では高さが120px引かれた状態、400px幅では高さが40px引かれた状態になります。ただ、角度15度にしたい！とかって意図がない限りは計算するというよりバランス見ながら増減されるで良さそうです😊♪
@@hirocode なるほどです。ご返信ありがとうございました！
非常にわかりやすいです、ありがとうございます。あととても気になるのが、投影している画面上の資料のフォントはなんでしょうか？新ゴ系ですか？？かっこいいです。
嬉しいコメントいただきありがとうございます😆❗️スライドで使ってるフォントは基本、コーポレート・ロゴとMOBOを使ってます😊♪
たすかる
ありがとうございます😆❗️
Figmaでフレームを4等分して、その4等分した点とオブジェクトの中心を合わせてレイアウトすることはできますか? わかりにくい文ですみません。 また、こういうアニメーションは作れますか? drive.google.com/file/d/1M3lyNDB0Mu89N7tnoiuwq-t0m-MhLcxZ/view?usp=drivesdk
むずい
グリッドレイアウトは少し難しいので、基本から順々に学んでいくのがオススメです☺️❗️
関係ないけどタイピングの音が心地良いです😂❤
ありがとうございます😆❗️❗️
機能一つ紹介のショートがあったらより伸びるかもしれません
それやってみます🤯❗️ありがとうございます🙇‼️
本当にいつも色んなことを学ばせていただき頭が上がりません。 Webデザイン関係の動画投稿者の色んな方の動画を拝見させていただいておりますが 私的にナンバーワンです。 伝え方、見やすさが特に優れていて今は違う動画がみたいなという時でもちょっと覗いてみようかなとなり、後で自分で試してみようとまた同じ動画を見てしまう程です。 定期投稿続いてくれたら嬉しいです😭
そんな嬉しすぎるお言葉いただけてこちらとしても投稿している甲斐があります😭❗️より参考になるような動画出し続けられるように頑張ります🙇❗️❗️❗️
すっごいって、思いましたが何で背景消しましたか？ ツールなど教えていただければ！
手っ取り早く削除したい時は、Adobe expressの背景削除使ってます😆❗️adobe 背景削除 で検索して、画像アップすれば切り抜かれます❗️
すいません、remを使う時はパソコン画面にvwを入れてますでしょうか？
コメントありがとうございます😆❗️ remはhtmlのフォントサイズを基準とする単位です❗️デフォルト16pxで、htmlのフォントサイズ変更するとremで指定した箇所サイズも変化します。 vwは画面幅の指定なので、また別の話になるかと思われます🤔
@@hirocode そうなんですね！ 他の企業のホームページをみたらパソコンサイズからルートに6vwと書かれててそれ以降は、全て単位はremで指定されてたので気になってました！ ありがとうございます！
質問なのですが、コンストレインツという項目がないのですがどうすれば出てきますか？
今は、「制約」という言葉になっていて、フレーム内のオブジェクト選択すれば右サイドバーに表示されます❗️
制約もないんです。デザインの方にもプロトタイプの方にもありません。無料版だからでしょうか？
もしかして新しいUIにアップデートされてたら、よりわかりにくいかもです🤔 まずフレーム内に四角を配置して、左サイドバーのレイヤーパネルが下記のようにネストしている状態か確認します。 ＃frame ▫️rectangle rectangleレイヤーを選択して、右サイドバーの「位置」項目の右側に + マークのようなアイコンがあるのでそれが制約です！
見つかりました! ありがとうございます!
SVGの前動画のお陰でめちゃくちゃ助かりました…いつもいい動画ありがとうございます！
嬉しいです😆こちらこそありがとうございます🙇❗️
SVGって何だ？（論外）
普段から使ってないとなかなか聞きなれないですよね😅笑
こんな機能あったんだ... よく見つけますね
ありがとうございます😆❗️
鳥肌立ちました‼️
ありがとうございます😆❗️
フロントエンドあんまやらないけどすげえ便利そうだからチャンネル登録しとくわ
嬉しいです😆❗️ありがとうございます🙇
いつも動画見てます。質問があります。例えばメインビジュアル写真から下のアバウトの文字までの距離などどのようにしたらいいですか？いつも数値がわからず8の倍数にしてます。又プロフィール画像のサイズの数値などもどのように考えればいいですか？
いつもご視聴いただきありがとうございます😊♪そこらへんのバランスは正直決まりがなく感覚です💦 デザインによりけりですが80~100pxくらいで設定することが多いです🤔 似たような雰囲気のサイト参考にするのが一番手っ取り早いかもです😆❗️
コメント失礼します！ 動画の方法でサイトアップロード後、ファイルの修正(HTML、CSS、Java Script、php等)を行った場合、再アップロードが必要でしょうか？もしくは、自動で反映されるのでしょうか？ご回答よろしくお願いします。 p.s. もしよろしければロリポップ契約、ムームードメイン契約の最新バージョンの動画をアップロードいただけると幸いです。ご検討よろしくお願いします。
コメントありがとうございます🙇！自動では反映されないので、再度ローカルからサーバーにアップする必要があります！ おっしゃる通りこの動画もう2年経つので新しい動画検討してみます🙇♀️❗️
めっちゃわかりやすかったです！！！
そう言っていただけて嬉しいです😆❗️ありがとうございます🙇❗️
オートレイアウトとは関係がないのですが、ヒロさんの動画をみていてこれいいな！って思ったフォントがあって調べたら、２つ同じようなものが出てきました。 MOBOとA1ゴシックです。どちらを使われていますか？もし、どちらとも使われているのであれば、どっちの方がよく使いますか？
コメントありがとうございます😆❗️ おっしゃる通りその2つのフォントは似ているで有名で、A1ゴシックは有料フォントMOBOは無料フォントです！ 僕は無料のMOBOを使ってます😊❗️
@@hirocode わかりました！ありがとうございます。
おおおおおおおおおおおお
コメントありがとうございます😆❗️
これでなんでワイズになるんやろ
要素の置き換えが元の要素をコピーした上でCmd、Shift、R押したけどできないんですが理由があるのですか？
コメントありがとうございます😆❗️ 仕様は変わってないので、おそらく入力ミスの可能性が高いです🤔 cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか❓ また、右クリックから「貼り付けて置換」で同様の操作が実行されるので、こちらも合わせて使用したら原因わかるかもです❗️❗️
@@hirocode cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか＜これ試したけどさっきと同じ様に要素の名前変更にしかなりませんでした 貼り付けて置換とは右クリックした後にどこに出て来るのでしょうか(未だ出てこないので)？
cmd+r がリネームのショートカットなので、shiftキーが正しく効いていないようです🤔 オブジェクトを右クリック（通常のクリックでなく右クリックです。デスクトップでの右クリックと同様にコンテキストメニューが表示されます）すると、上から、コピー・ここに貼り付けに続けて3つ目に表示されます！レイヤーを右クリックした場合、上から2つ目に表示されます。
@@hirocode コマンドとオプションと押したらできました！ わざわざありがとうございます
Windows版の説明ではないので、参考にならない・・・・
使ってみたが、画面数が多いと、固まってしまって使えなかった
ありがとうございます！
こちらこそありがとうございます😆❗️
何番目のclassの指定ができるんですね これは使える！ ありがとうございます
クラス指定できるの良いですよね😆❗️
class名つけたらダメなの？
おっしゃる通り、基本形にはクラス名付与してスタイリングが良いです❗️ただ、エディタ投稿など個別にクラス付与できない際にnth使う選択肢が出てくるのかなと思います💡
ハイフンネーション？hyphenationのことなら「ハイフォネーション」あるいは「ハイフネーション」
おっしゃる通りで前にも同じ指摘いただきました😅 ハイフネーションの間違いです🙇❗️
ということは :nth-child(2) と p:nth-child(2) は同じということ？
:nth-child(2)はタグを指定してないので、2つ目の要素がどのタグだろうとスタイルが適用されます。p:nth-child(2)だと、2つ目の要素かつpタグであればスタイルが適用されるって感じです😊❗️
まあnthof typeでいいな。
nth-of-typeでもクラス名でカウントできないので、そういった場合は使えるかもです💡 正直nth使う機会かなかな少ないですよね😅
nth-child、nth-of-typeは未だにごっちゃになります…😂😂😂
めちゃ分かります🤣❗️ childはその名の通り子要素の数でカウント、typeはタグの種類でカウントって感じですね🫡
いつも動画で勉強させていただいております。 こちらにコメントして良いかわからないのですが、もしよろしければご回答いただけますと幸いです。 WPで直接エディターの編集となるとさまざまな不便さがあるので、ローカル環境でVS CODEエディターを用いて編集しています。 （模写コーディングぐらいなら、簡単なディレクトリ構成なのでエディターですぐ作業できるのですが） 作業結果を都度ローカルで確認したいのですが、作成したものをわざわざFTPにアップとなると手間になります・・・ なのでローカル環境でWPと同じディレクトリー構成を作りたいのですが、複雑でどうしたら良いかネットでも調べても出てきません。
コメントありがとうございます🙇 すみません、直接の解決につながるか分かりかねますが、 【簡単】WordPressをローカル環境で！ワードプレスのインストール方法も！ って動画あげてて、この方法であればローカルでワードプレス動かすことが可能です💡
@@hirocode お礼が遅くなり申し訳ございません。ご丁寧なご回答ありがとうございました！今後もこちらで勉強させていただきますので、よろしくお願いいたします。