Тёмный
No video :(

【HTML/CSSコーディング】超便利な擬似要素。data属性も。 

HIROCODE.
Подписаться 67 тыс.
Просмотров 25 тыс.
50% 1

今回は擬似要素:before:afterの説明動画です。
テキストベースの動画にしてみたのですが、分かりやすい、分かりにくいなどご意見があればコメントいただけると嬉しいです☺️
この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします😆❗️
その他のSNSもフォローいただけたら嬉しいです🙇‍♂️❗️
◆ チャンネル登録
www.youtube.com...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.c...
🔋 僕が使っている、おすすめのデバイス 🔋(アフィリエイト広告を使ってます!)
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス 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...
----------------------------------------------------------

Опубликовано:

 

5 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 40   
@odaroku
@odaroku 24 дня назад
ずっと疑問に思っていた擬似要素についてとてもわかりやすく教えてくださり、本当にありがとうございました!すごくよくわかりました!😭❤✨
@hirocode
@hirocode 20 дней назад
お役になったようで良かったです😊♪嬉しいコメントいただきありがとうございます😆❗️
@user-gs1iu8vo5z
@user-gs1iu8vo5z Месяц назад
ありがとうございます!
@hirocode
@hirocode Месяц назад
こちらこそありがとうございます😆❗️
@rogw6043
@rogw6043 3 года назад
完成図があって一つずつ近づけていく感じわかりやすくて最高
@hirocode
@hirocode 3 года назад
ありがとうございます🙇‍♂️❗️
@kuroyan235
@kuroyan235 3 месяца назад
ありがとうございます。すっげー分かりやすい!!!
@hirocode
@hirocode 3 месяца назад
めちゃめちゃ嬉しいコメントありがとうございます😆❗️
@fumi8991
@fumi8991 2 года назад
わかりやすい! 勉強になりました!
@hirocode
@hirocode 2 года назад
嬉しいコメントいただきありがとうございます🙇‍♂️❗️
@user-tf2kq1uz9g
@user-tf2kq1uz9g 2 года назад
再生のバーと同じ場所に下のバーがあるのクソ見やすい!
@hirocode
@hirocode 2 года назад
ありがとうございます😆‼️
@mitsuki-te8nc
@mitsuki-te8nc 3 года назад
めちゃめちゃ分かりやすかったです! 参考にさせていただきます!!
@hirocode
@hirocode 3 года назад
そう言っていただけて嬉しいです😭ありがとうございます❗️
@smami5740
@smami5740 2 года назад
疑似要素、奥が深いですね~! わかりやすく解説してくださり、本当にありがとうございます。
@hirocode
@hirocode 2 года назад
こちらこそご視聴いただきありがとうございます😊♪
@tomoki.u6720
@tomoki.u6720 3 года назад
擬似要素のことがやっと理解できました!為になる動画ありがとうございます!
@hirocode
@hirocode 3 года назад
こちらこそ参考にしていただけて嬉しいです😆❗️ありがとうございます🙇‍♂️❗️
@misora6727
@misora6727 3 года назад
めっちゃ分かりやすかったです!
@hirocode
@hirocode 3 года назад
ありがとうございます🙇‍♂️❗️❗️
@kakkoiinippon
@kakkoiinippon Год назад
🇯🇵🇯🇵🇯🇵わかりやすいです
@hirocode
@hirocode Год назад
ありがとうございます😆❗️
@user-ef9ev9ir1j
@user-ef9ev9ir1j 3 года назад
初めて動画拝見しました!! 疑似要素が出てくると良く分からなくて逃げ腰になっていたのですが、こんなに便利なものだったんですね・・・。 復習しやすい動画になっているのも助かります。 他の動画も拝見させていただきます。 これからも楽しみにしています!!
@hirocode
@hirocode 3 года назад
そもそも擬似要素って名前自体が難しいイメージ醸し出してますよね😅笑 嬉しいコメントありがとうございます🙇‍♂️より良い動画アップできるように頑張ります❗️
@user-kt9ec6ir3t
@user-kt9ec6ir3t 3 года назад
今。オンラインのプログラミングスクールにてWord Press講座に入る前のLP作成課題で苦しんでるとこです。 擬似要素はよく出てくるのに理解ができてなかったので非常にありがたい動画です。 実用できるまで繰り返し見ます。チャンネル登録しました。
@hirocode
@hirocode 3 года назад
嬉しいコメントありがとうございます🙇‍♂️❗️チャンネル登録もしていただけて嬉しいです😭 少しでも参考にしていただけたようで幸いです❗️ スクール通っていらっしゃるんですね😲頑張ってください応援しています😆❗️❗️
@user-mq3jq7qk1h
@user-mq3jq7qk1h 3 года назад
有益すぎて興奮してます。
@hirocode
@hirocode 3 года назад
嬉しいです😆❗️ありがとうございます❗️❗️
@user-sn4td5ii1d
@user-sn4td5ii1d Год назад
もうあるかもしれないですが、:hoverの際色々遊んでみたいので、「:hoverで色々遊んでみた」みたいな動画ほしいです!
@hirocode
@hirocode Год назад
考えてみます❗️ご要望ありがとうございます😆❗️
@kenjijinke
@kenjijinke 3 года назад
こんな便利な裏技があったとは。。
@hirocode
@hirocode 3 года назад
コメントありがとうございます🙇‍♂️❗️参考にしていただけて嬉しいです😊🎵
@ikedaminori
@ikedaminori 3 года назад
擬似要素の使い方が実例を交えて解説してるので、分かりやすい&実際に使えるヒントがたくさんで素敵です😊
@hirocode
@hirocode 3 года назад
嬉しいコメントありがとうございます😭
@____-fv1lt
@____-fv1lt 3 года назад
親切すぎる~~~~~~~~~~~本当にありがとうございます(´;ω;`)
@hirocode
@hirocode 3 года назад
こちらこそありがとうございます🙇‍♂️❗️❗️
@-mosaic7723
@-mosaic7723 3 года назад
実際のサイトのソースを眺めていると、::before のようにコロンが二つ付いてる場合があるのですが、何か違いはありますか?
@hirocode
@hirocode 3 года назад
ご質問いただきありがとうございます🙇‍♂️❗️ 擬似要素の古い記述が「:」で、新しい記述が「::」になります。 古い記述は古いバージョンのIEに対応しているため、一応、より幅広いブラウザに対応する書き方になっています。 現状特に機能的な違いはありませんが、今後を見据えて「::」で記述する方が良いかもしれません❗️
@kumanokoTV
@kumanokoTV 3 года назад
はじめまして。 画像をCSSで設定する際にcontentでは指定せずbackgroundするのは何か違いはあるのでしょうか?
@hirocode
@hirocode 3 года назад
コメントありがとうございます😊♪ contentで画像を指定する場合、画像サイズの調整ができなくなるため、基本的にbackgroundで指定するようにしています❗️
Далее
Timings hated him #standoff #timing #meme
00:14
Просмотров 489 тыс.
HTMLをブラウザで表示する方法
9:37
Просмотров 22 тыс.
CSSクラス命名規則、FLOCSSとBEM。
11:50
Просмотров 25 тыс.