HTML CSSでマリオを作る。
HTML CSSでマリオ（super mario bros.）を再現しました😆♪
🔗 今回作成したファイル
jsfiddle.net/HIROCODE/6uow5th...
🎥 この動画の目次 🎥
00:00 1. ベースを作る
00:25 2. 帽子を作る
01:22 3. 輪郭を作る
02:29 4. 耳を作る
03:58 5. ヒゲを作る
05:01 6. 髪を作る
06:08 7. 目を作る
08:22 8. 鼻を作る
08:49 9. 帽子のつばを作る
09:44 10. 眉毛を作る
11:11 11. レイヤーの重なりを調整
12:22 12. ヒゲの上の肌を作る
13:01 13. 髪の上の肌を作る
14:09 14. 頭部を切り取る
15:11 15. 帽子のマークを作る
16:38 16. アニメーションを作る
🤖 AI動画 🔽
❶ ChatGPTとMidjourneyで作るWEBデザイン
• ChatGPTとMidjourneyで作る、...
❷ Midjourneyで写真を元に画像生成
• 【AIツール】Midjourney - ミッ...
❸ ChatGPTでWebサイトを作れるか？
• ChatGPTでコード生成、Webサイトを作...
❹ AI化するエクセル・パワポ
• 【ChatGPT】エクセルやパワポがAI化「...
❺ AdobeのAIツール"Firefly"で出来る24のこと
• 【Adobe アドビ】AIツール「Firef...
❻ GitHub Copilotで自動コーディング
• 【自動コーディング】GitHub Copil...
❼ Adobeの画像生成AI"Firefly"ベータ版使ってみた
• Adobeの画像生成AI「Firefly -...
⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
• 【10分でサイト公開】誰でもできる！Webサ...
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス 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 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#adobefirefly #chatgpt #画像生成ai
Пікірлер: 21
最近、挫折気味になってきてしまいまして…楽しさを忘れてしまってるかもしれないです笑 マリオ、癒されました😊
@hirocode
Жыл бұрын
そういう時ありますよね😭 ぜひご自身でも気分転換に楽しめるもの取り組んでみてください😆‼️ありがとうございます🙇
解説動画たのしみにしてました！まじですごい
@hirocode
Жыл бұрын
ありがとうございます😊‼️
こういうの見てるとイラレって凄いんだなって気が付く。
@hirocode
2 ай бұрын
なんだかんだシェイプ扱うのはイラレですよね🤔
ピカチュウの動画も是非お願いします！
@hirocode
Жыл бұрын
ありがとうございます😆今度あげます！！
リクエストです。gulpやwebpackなどのタスクランナー使っていらっしゃれば、紹介してほしいです。 ヒロコードさんが良くされている仕組み化やコードを書く上での効率化など。
@hirocode
Жыл бұрын
リクエストいただきありがとうございます😆❗️
htmlではどのようなタグを使ったら良いのか、CSSはプロパティが主に使いますか？
@hirocode
Жыл бұрын
基本的にdivタグに対してサイズの指定とposition absoluteで配置していくのが主な作業になります😆‼️
質問させていただきます。 vscodeを使ってrubyonrailsのhtml.erbでページ制作を行っていますが、正直普通のhtmlよりめちゃくちゃ書きづらいです。 例えばTabキーを押してauto close tagで自動的に閉じタグを生成するやつで、pタグを打つためにpでTabキーを押すとになって、pタグにならなかったり、 さらにh1タグが打てなかったり、erbではない普通の.htmlだとリアルタイムでブラウザが自動更新できるのに、html.erbでは更新ボタンを押さないと更新できなかったりなど、 普通のhtmlみたいにいつも通りhtmlが書けるようになりたいです。これは可能でしょうか？ 関係ない質問で申し訳ありません。 あと動画すごく分かりやすくていつも勉強になります！
@hirocode
Жыл бұрын
ありがとうございます😆‼️ すみません💦Ruby全然詳しくないのでなんとも言えないのですが、Ruby, endwise, Rails等のプラグインは必須っぽいです☑️
@Star-qp7rv
Жыл бұрын
@@hirocode ありがとうございました！
黒の円形のポインターはどのようにしたら使えますか？
@hirocode
7 ай бұрын
すみません💦黒の円形ポインターとはどこのことでしょうか🙇❗️
@user-nh6cn9ct2y
7 ай бұрын
@@hirocode はい
@user-nh6cn9ct2y
7 ай бұрын
レディウスをマリオに合わせている時のマウスポインターです
先日XDの動画を拝見させていただきました。 今デザイナーとしてワイヤーフレームを作成しているのですが、アートボードのグリッドレイアウトの列数、段間幅などの決まりはあるのでしょうか。 PC版、SP版のワイヤーフレームを作成するときに異なってくると思うので、このPxの時は列数こんだけなどの目安などありましたらご教授いただきたいです。
@hirocode
Жыл бұрын
ありがとうございます😆‼️ その辺明確な決まりはなく、サイトによっても大きく異なるのでなかなか難しいです💦 その辺は近しいサイトいくつかピックアップして参考にしてみるのが良さそうです✅