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デザインの動画を紹介しました。

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

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

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

 

関連記事

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

 

続きを見る

プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説と書かれた画像
プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説

  てんし君   プログラミングの学習を始めるにあたって多くの人が気にすることがプログラミングは独学でも習得できるのかどうかということです。   この記事では現役のプログ ...

続きを見る

エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】と書かれた画像
エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】

  あなたエンジニアの面接のときに志望動機を聞かれたときの良い答えってありますか?   この章ではエンジニア面接の際の良い志望動機の答え方を紹介していきます。   【この ...

続きを見る

SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】と書かれた画像
SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】

  あなたSESはよくないってこと?   ここまで読み進めてくださっている方は「SESにいいところないじゃん」と思っているかもしれませんがその考え方は間違っています。 SES企業に ...

続きを見る

【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめますと書かれた画像
【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめます

  実はエンジニアになって4ヶ月経ちました。 今回はぶっちゃけエンジニアになってどんな感じ?と気になる方に向けてエンジニアになって数ヶ月経った僕の感想を紹介していきます。   この ...

続きを見る

-HTML/CSS
-, ,

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