HTML/CSS

DarKCodeとは?おすすめ動画5選【HTML・CSS】

投稿日:2019年5月24日 更新日:

こんにちはえーちゃん@akaaaan555です。

みなさま!!DarkCodeという動画をご存知でしょうか?

今後大注目の動画だと思っています。

HTMLとCSSのみを使って色んなWebデザインを作る過程を載せてくれている動画なのですが。とにかく凄いんです(笑)

今回はこれから僕がこれから日本でも流行るであろう大注目の動画DarkCodについて紹介していきます。

 

必見!DarkCodeとは?

 

DarkCodeは正確にはYoutube投稿者のチャンネルの名前です。

 

チャンネル名DarkCode
動画内容Webデザインのコード編集
登録者数108,160人(2019年5月8日時点)
投稿数170本
動画の平均時間10分程度
運営者外国の方(女性?)

 

2019年5月8日現在の登録者数は108160人でそのほとんどが外国の方だと思われます。(コメント欄が英語ばかり。たまに僕もコメントしているので見つけてね)

 

動画についての説明の概要欄には

 

DarkCode is a channel for Learning Web Designs, Websites Building, Ui Designs Using Only HTML5 And CSS3 and some Javascript. Our Content is 100% free and easy to got it ♥

引用元:https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw/about

 

と書かれています。

 

簡単に日本語訳すると

 

「ダークコードはウェブデザイン、ウェブサイトの作り方、ユーザーインターフェースデザインの学習チャンネルです。HTML5 とCSSとたまにJavascriptを使います。無料だし簡単に勉強できるよ♥」

 

って感じですね。

最後のハートが気になりますが運営者は女性なのでしょうか。

 

動画内の表記言語の指定が英語ですし、概要欄も英語で書かれているので運営者が外国の方であることは間違いなさそうです。

 

動画の内容はHTMLとCSSのみを使ったコード編集がほとんどで、たまにJavascriptを使った動画もあります。

 

Web系のプログラマーになりたい方や、Webデザインを勉強中の方はめちゃくちゃ面白いと思います。

 

てんし君

HTMLとCSSの勉強を始めたときにYoutubeにいい教材があるかな~と思って調べたことが見つけたきっかけでした。

初めて見た時は、こんなにかっこいいデザインが作れるなんてすごいなという感じでしたね。

創作意欲の高まりが半端なかったです。

 

僕が厳選したDarkCodeの面白い動画5つ

 

言葉で言っても面白さは伝わらないと思うのでまずは見てもらいましょうってことで、僕が個人的に170本の動画から特に面白いと思った動画を5つ厳選してみたのでぜひご覧ください。

 

BGMもノリノリの曲ばかりなのでワクワクしてみることが出来ると思います。

 

てんし君

全部面白いから悩みに悩んだぞ。

 

1.文字が顔に...あっという間の7分間!

 

「Eyes follow mouse curser using HTML CSS & Javascript」

 

というタイトルで投稿されています。

マウスのカーソルに合わせて目が動くデザインを作り上げていく動画です。

無機質な文字列からポップなキャラクターが作り上げられていく様子が収められています。

これにはコメント欄も驚きと称賛で溢れてましたね。

 

「どっから考えが浮かんでるの!?」

「すげぇ。Javascriptをおしえてくれ…」

「めっちゃカッコいいじゃん!!」

 

という言葉が沢山ありました(笑)

 

2.合計48万回再生!美しいログインフォーム

 

「Animated Login Form Using Only HTML & CSS」というタイトルで投稿されています。

シンプルながら洗練されたデザインのログインフォームが作られています。

どうして一番再生されているかはわからないですが、見てみると作ってみたくなります。

 

てんし君

何かの紹介でバズったのかもしれませんね

 

しかもこのログインフォームもそこまで複雑な構造になっていません。

僕は好きすぎてこのデザインのコードを暗記しています。

個人的に色のバランスが好きです。DarkCodeの動画ではよくこの動画に出てくる緑色が使われています。

 

3.日向(ヒナタ)を使った激熱なデザイン

 

「Ui Card Design - Hinata Profile Card Using Only HTML & CSS」というタイトルで投稿されています。

プロフィールのカードをHTMLとCSSを使って作成するという動画です。

あの人気少年漫画ナルトのキャラであるヒナタが使われているということでピックアップしました。

 

他のプロフィール作成の動画でもワンピースの登場キャラクターであるゾロが使われてましたし、ほかの動画では七つの大罪のメリオダスが使われていましたし、運営者ジャンプ大好き説あるんですよね。

 

DarkCodeの動画の中では割と長めの12分19秒もあるし、何かこだわりも難じさせる動画になっております。

 

作者は日本のことも好きかもしれませんね(笑)

てんし君

個人的には日本のアニメが使われていることが嬉しいです。

 

4.遊び心満載!かわいい動くアイコンデザイン

 

「Awesome Social Media Buttons Hover Only HTML & CSS」というタイトルで投稿されています。

TwitterやFacebookのアイコンがユニークに動くデザインになっています。

 

DarkCodeの動画ではマウスのカーソルに合わせて変化したりするデザインがよく使用されていますがこれは典型的なパターンです。

 

5分程度の動画ですが、DarkCodeの動画の基本が多く取り入れられており気に入ったのでピックアップしました。

 

5.スマホ対応【背景が動くLP】

 

「Animated Full Landing Page Using Only HTML & CSS」というタイトルで投稿されています。

見てもらうのが1番ですがとりあえずかっこいいです(笑)

ちなみにLPというのはランディングページの略で基本的には1枚のWebページを指します。

スマートフォンにも対応させながら作っているのでその点でも勉強になります。

 

Webデザイン作成練習にも使える

 

DarkCodeの動画はただ見るだけでも楽しめますが実際にHTML やCSS,Javascriptを使ったWebデザインの作成練習にも使えます。

 

僕は実際にHTMLとCSSを使ったWebデザインの練習にこの動画を使っています。

スマホの画面で動画を流しながらPCでコードを書いていくって感じです。

途中で意味の分からないコードが出てきたらその都度調べるといいと思います。

 

効率面や勉強の真剣さの度合いではおすすめできない

 

この章の冒頭では勉強できるといいましたが、結論からいうと

なるべく早くWebデザインを仕事にしたい方にはおすすめできません。

 

理由としては

 

・DarkCodeで身に着けたデザインが実際に必要とされるかはわからないから

・わからないところが出てきたら自分で調べなければならず、効率は悪い

 

以上の2点があげられます。

もし今すぐにでもWebデザイナーやWeb系のエンジニアになりたいのであれば、お金を払ってスクールに行くことがいちばん効率がいいです。

今は、Web系のスクールも充実しています。

 

こんな人にはDarkCodeでの学習はおすすめ

 

実際に僕はDarkCodeno動画で基本的なHTMLとCSS勉強をしています。そんな僕が感じている「こんな人におすすすめ」に当てはまる人は

 

・自分で調べることが苦じゃない

・趣味程度で勉強したい人

 

です。

ぶっちゃけ初心者がDarkCodeで勉強しているとわからないところはたくさん出てきます。

その際には自分で調べる必要が出てきます。

それが別に苦ではない方はDarkCodeで勉強することはいいと思います。

あと、少し趣味でHTMLとCSSを動かしてみたいという程度の方もいいと思います。

 

おわりに

 

今回はDarkCodeというHTMLとCSSの勉強にも使えるWebデザインの動画を紹介しました。

勉強している方もそうでない方も楽しめます。

個人的には今後チャンネル登録者数も増えて日本の視聴者さんも増えていくんじゃないかなと思っています。

プログラミングの学習者も増えている中でこのような動画が無料で公開されていることは嬉しいですよね!

 

その他HTML/CSSに関する記事

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  step0 学習の見通しを持つための記事を読んでおこう!   step1 教材を用意しよう! step2 HTMLとCSSの意味を理解しよう! step3 HTMLとCSSを使って開発できる環境を ...

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

 

続きを見る

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS
-, ,

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.