- 366
- 5 449 791
HIROCODE.
Japan
Приєднався 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.
神ブラウザ「Arc」の使い方 ...このブラウザ、有料級...
Arc(アーク)ってブラウザ知ってますか?
騙されたと思って一度使ってみたら、他のブラウザに戻れなくなるほど便利なのでオススメです😆❗️しかもこれが無料で使えるって凄すぎます🤯
⬇️ ブラウザ「Arc(アーク)はこちら」⬇️
arc.net/
🎥 この動画の構成 🎥
00:00 Arc(アーク)とは?
01:10 Arcの特徴
02:11 サイドバー
02:57 お気に入り
04:31 ❶ お気に入りとタブの併用
05:42 スマホ版Arc
05:59 ❷ サイトのポップアップ表示
06:32 ❸ Split View(スプリットビュー)
07:28 ❹ ピクチャーインピクチャー
08:01 ❺ Easel
08:46 ❻ スペースの切り替え
09:22 ❼ Boost機能
09:48 ❽ Arc Max
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
ua-cam.com/users/hirocode
◆ Twitter. ツイッター
hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン?
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
------------------------------
Happy and Joyful Children by Free Music ua-cam.com/video/lv1YPeP1O8k/v-deo.html
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/2PV1WMi
Music promoted by Audio Library ua-cam.com/video/zXnuDrEN9Xo/v-deo.html
------------------------------
#ブラウザ #プログラミング #arc
騙されたと思って一度使ってみたら、他のブラウザに戻れなくなるほど便利なのでオススメです😆❗️しかもこれが無料で使えるって凄すぎます🤯
⬇️ ブラウザ「Arc(アーク)はこちら」⬇️
arc.net/
🎥 この動画の構成 🎥
00:00 Arc(アーク)とは?
01:10 Arcの特徴
02:11 サイドバー
02:57 お気に入り
04:31 ❶ お気に入りとタブの併用
05:42 スマホ版Arc
05:59 ❷ サイトのポップアップ表示
06:32 ❸ Split View(スプリットビュー)
07:28 ❹ ピクチャーインピクチャー
08:01 ❺ Easel
08:46 ❻ スペースの切り替え
09:22 ❼ Boost機能
09:48 ❽ Arc Max
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
ua-cam.com/users/hirocode
◆ Twitter. ツイッター
hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン?
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
------------------------------
Happy and Joyful Children by Free Music ua-cam.com/video/lv1YPeP1O8k/v-deo.html
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/2PV1WMi
Music promoted by Audio Library ua-cam.com/video/zXnuDrEN9Xo/v-deo.html
------------------------------
#ブラウザ #プログラミング #arc
Переглядів: 8 405
Відео
プログラミングモニター使ってみた!コーディングもWebデザインも快適♪【BenQ RD240Q / RD280UA / DP1310】
Переглядів 4,6 тис.14 днів тому
提供:ベンキュージャパン この動画は、商品の提供を受けて投稿しています プログラミングモニター「RD240Q・RD280UA」のレビュー動画です😆❗️ エンジニアやデザイナーの方はコード画面と向き合う時間も多いはず... モニターを改善することで作業効率を上げ、疲れを軽減させることはかなり重要視すべきことだと思います🤔 気になる方は是非チェックしてみてください😊♪ 🔽 この動画で紹介したモニターはこちら 🔽 RD240Q: bit.ly/3zfWwnl RD280UA: bit.ly/3RF5K31 🎥 この動画の構成 🎥 00:00 BenQ RD240Q・RD280UA レビュー 01:02 基本スペック 01:57 プログラミングモニターって何? 02:49 Display Pilot 2 03:13 モニター本体 03:58 RD280UA 04:44 MoonHalo(背面...
FigmaSlides(フィグマスライド)の使い方
Переглядів 1,7 тис.Місяць тому
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 デザインモード(有料プラン) ...
【2024最新】30分マスター講座 Figmaの基本と便利な使い方! | WEBデザインツール
Переглядів 87 тис.7 місяців тому
【2024最新】30分マスター講座 Figmaの基本と便利な使い方! | WEBデザインツール
【8分でマスター】CSS変数(カスタムプロパティ)の基本と便利な使い方。
Переглядів 6 тис.9 місяців тому
【8分でマスター】CSS変数(カスタムプロパティ)の基本と便利な使い方。
GPT4搭載!AIコードエディタ「Cursor(カーソル)」の使い方
Переглядів 34 тис.9 місяців тому
GPT4搭載!AIコードエディタ「Cursor(カーソル)」の使い方
【CSS新機能】コンテナクエリ@containerの使い方と実例紹介!
Переглядів 7 тис.9 місяців тому
【CSS新機能】コンテナクエリ@containerの使い方と実例紹介!
CSSに新機能!スクロールに連動してスタイルを変化「Scroll-driven Animations(スクロールドリブンアニメーションズ)」
Переглядів 9 тис.10 місяців тому
CSSに新機能!スクロールに連動してスタイルを変化「Scroll-driven Animations(スクロールドリブンアニメーションズ)」
50行で完成!行と列固定のテーブルを作るCSSチュートリアル【HTML/CSS/Sass】
Переглядів 2,9 тис.11 місяців тому
50行で完成!行と列固定のテーブルを作るCSSチュートリアル【HTML/CSS/Sass】
40行で完成!ハンバーガーメニューを作るCSSチュートリアル【HTML/CSS/Sass/JS】
Переглядів 10 тис.11 місяців тому
40行で完成!ハンバーガーメニューを作るCSSチュートリアル【HTML/CSS/Sass/JS】
【ワンランク上を目指す!】WEBデザイナー向けUdemyオススメ講座 5選
Переглядів 4,9 тис.Рік тому
【ワンランク上を目指す!】WEBデザイナー向けUdemyオススメ講座 5選
一番ヤバい、超最先端画像編集AI登場!【Drag Your GAN(ドラッグユアガン)】
Переглядів 13 тис.Рік тому
一番ヤバい、超最先端画像編集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 - ファイアフライ」ベータ版使ってみた!
.headerの中に.containerを入れると反映されないんですが
コメントありがとうございます☺️❗️ 1. sassを使っているのでcssにコンパイルする必要がある。 2. この点だけでいうとネストして書く方法はモダンブラウザ に対応しているので、ブラウザアップデートすれば表示されるかもしれません。 .header { .container { color: blue; } } 上記で解決されない場合、単純にどこかコードが間違ってる可能性が高そうです🤔
CSSどうやって覚えるのだろ
ちょうどサイト作ってたのでこちらの動画ありがたいです🙏🏻質問なのですが、cssのbackground imageに対してはこのプラグインは有効でしょうか?やってみたのですが画像が表示されなくて🥲 やはりこちらの動画のように imgタグでやらないとですかね🥹?
コメントありがとうございます☺️♪ 中のタグはなんでも問題ないです!例えば、divタグを入れて背景画像を使う場合、divタグに高さや横幅があるか確認してみてください!
pwaとかで使えそうかな
高校で作ったアプリofflineイベント入れたなー 機能制限するときにすごく便利だった
いいですね😆‼️
逆に、ややこしいいね、マーキータグ無くなったのか?
マーキータグは非推奨になってます❗️
分からない人からするとこれをどこに適用するのかが分からんかった
それな〜です。 indexeddbとか使うようなオフラインでも使えるアプリケーションに使えそうかも・・?
こんなイベント知らなかった
実際あまり使うことないです😂
👊😊
@@kei.t_shorts 😆❗️
ディブタグ
ベージが遷移って何だ???😅
もう個人で映画作れるやん
ほんとそうなりますね🤯
すごく分かりやすかったです!有益な動画を作成いただきありがとうございました!
そう言っていただけて嬉しいです😭ありがとうございます🙇❗️
すごい良さそう!ではあるのですけど、Windows版はまだまだかなぁ 日本語対応されていないのも地味に不便。 あと、Android版が存在していないので全端末で共有!ができないのも痛いかな
そうみたいですね💦 Windows版も改善頑張って欲しいですね🤔❗️
学習始めたての初心者です。 将来こんなことも出来るんだな~と、学習の励みになります。 ありがとうございます。
嬉しいコメントありがとうございます😆❗️
jsでやってたな😢cssの方がシンプルでいいですね
ありがとうございます😆❗️
今までjQuery使ってたけど、cssでできるんですね!! 勉強になります!!
嬉しいコメントいただきありがとうございます😆‼️
フロントエンド触ってなかったけどちょっと面白そうだな。実務で使う分にはai生成である程度形にしてから修正の方が効率良さそうだけど、やっぱり自分の手で1から書くことって効率関係なく楽しいし、学ぶことも楽しいですよね
ほんと楽しんでコード書けるってめちゃくちゃ大事なことだと思います☺️‼️
すみません、質問です🙇♂️ 移動する速度は変更できるのでしょうか?
9行目の○sを修正すれば変えれます
@@nag_lint_lino そこで変更できるのですね。 ご教示いただきありがとうございます🙇♂️
一コメ ヒロコードさんのロゴがある!
ちゃっかり入れときました😂❗️
Arcめちゃくちゃ使いやすいですがWindows版がまだまだ難ありなので開発頑張ってほしいですね!
Windows版そうみたいですね😱💦ほんとその通りですね‼️
subgridの親に指定してあるgap値が大きいと相殺できない現象なんとかならないものか、、、 行の高さが無駄に広がってしまう😭
このバグ?なんなんでしょうね...
windows版はまだバグがありすぎて使えん
そうなんですね😱情報共有いただきありがとうございます🙇❗️
@@hirocode めっちゃ使いたいのに残念
早速入れてみました。 ちょっと使ってみようと思います! コーディングの 検証とかはChromeのディベロッパーツールで行うことにして Arcを使うことと、検証することは別に考えていたほうが良いですかね?
是非是非😆❗️ ベースがchromeなので、おそらくchromeの検証と相違ないんじゃないかな?と思っています🤔!
ためしにダウンロードしてみました。クロームベースといえばVivaldiを今使っていますので、楽しみです。でもなんか、アカウント作成しないと全く使えないっぽいのでしょうか?
しゅわぁん
結構音大きく入ってますね😅
ホルスタインを出すにはどうすれば良いですか?
hourse white が一番近いでしょうか🤔💡
案件ぷぷっぴどぅ~
全然案件じゃないです🙆♂️‼️
ブックマークが大量にある人にとってはサイドバーがいっぱいになってしまって、タブにアクセスするのに毎度スクロールしないといけなさそうだけど、どうなんだろう🤔
リストの中のお気に入り開く時はcmd+tab でのキーワード入力が1番早そうです💡開いてるものはcontrol +tab で切り替える感じです。いずれにしてもショートカット活用は結構必須かもです🤔
用途に合わせてワークスペースを複数作るとシンプルになります。それと、Chromeのようにフォルダーを作ることもできます。
カウンターってそっちのカウンターかw
こっちのカウンターでした🤣笑
なるほど…! 前になぜかこの指示入れると上手くいくけど理由が分からない…ってなってたんですけどスッキリしました😂 毎回ためになってありがたいです…!
よかったです😆‼️嬉しいコメントいただきありがとうございます🙇❗️
このようなっものがあるのを知りませんでした!買ってみたくなったです! ディスプレイって言った時、display: none;とかflexっていうかと思ったw
広い画面便利なのでおすすめです😆❗️そっちのディスプレイの方が馴染みありますね🤣笑
Grid便利すぎん?
便利でGridなしには戻れないです😆❗️
アス比縦に長いの良いなー
縦長めちゃ使いやすくて快適です😆❗️
モダンフレームワークに頼りっきりになると自力だと中々ここまで作り込めないんですよねー いつも参考にさせていただいてます!😊
嬉しいです😆ありがとうございます🙇❗️
🇯🇵🇯🇵いいね
ありがとうございます😆❗️
いつも知りたい情報を教えてくれるのは、なんでだろう、、、 ありがとうございます!
そう言っていただけて嬉しいです😭ありがとうございます‼️
おーこれはいいね!
めちゃ便利ですよね😆❗️
最近こういうの探してたので助かります! ホントこういうツール考える人スゴいですよね…
コメントありがとうございます😆❗️ジェネレーター作れる人って本当に凄すぎますよね🤯
widthやpaddingにemを使っているようですが(widthはpxも)、どのように使い分けていらっしゃいますか?
基本的には、フォント周りのサイズにはemを使用しています❗️レスポンシブ等でフォントサイズを変更した際に、フォーム内の余白がフォントサイズに応じて変化してくれるのが理想だからです!また、レイアウトに関するものはpxで指定しているって感じです!実際には異なることももちろんありますが、基本的なイメージとしてはそんな感じです😆❗️
こんな便利なものがあったのか、、笑
コレめちゃ便利ですよね😆❗️
チャンネル概要に使われているエディタ名を書いていただけると嬉しいです😊
基本的にはVSCodeというエディタを使ってます😆❗️
@@hirocode 返信ありがとうございます。 やっぱVSCodeなんですね。拡張機能たくさんあっていいですよね 😊 僕はサクラエディタです😃
最後に対応ブラウザーの表とか入ってるとすごく嬉しいです。😆
ありがとうございます❗️参考にさせていただきます🙇♀️❗️
これは便利! 疑似要素いらないのはありがたい
勝手にこのレイアウトになってくれるの便利ですよね😆❗️
まーじでCSS弱いの痛感するわー legendでやりたいこと出来そうやわ、さんきゅ
こちらこそコメントいただきありがとうございます🙇❗️
ピカチュウの画像ネットから拾って来てimgで良いやん
🇯🇵🇯🇵いいね
ありがとうございます😆❗️
ちょうど今仕事で使いたかったやつです!! 画像をBackgroundで貼ってもよかったんですが、コーディングで再現したかったのと、レスポンシブで位置調整にズレが起きて欲しくなかったので!! 明日会社で試してみます👏💕
おー!ちょうどいいタイミングでよかったです☺️♪
多分初コメです! HIROさんは僕たちが知りたいことを全部動画にしてくださってますよね! 本当にありがたいです。 2年ぐらい前からお世話になってます!
そう言っていただけて嬉しい限りです😭コメントいただきありがとうございます🙇❗️
わかりやす!
ありがとうございます😆❗️