HTMLだけでリッチなカレンダーを表示する

では、早速カレンダーを実装していきましょう。
今回使用するのは、inputの「type=”datetime-local”」。
これをつけるだけで簡単に実装することができます。

「datetime-local」

<input type="datetime-local">

実行結果

こんな感じで、これだけでリッチなカレンダーを表示することができます。
JSなどで実装するのはまぁまぁめんどくさいので、便利な時代ですね(^o^)

では、早速実装してみましょう！

HTMLだけでアコーディオンを実装する方法

今回使用するHTMLタグは「details」。
詳細折りたたみ要素です。

「details」の中に「summary」を追加して使用します。
「summary」の要素をクリックすることで、隠してある要素が表示されます。

<details>
    <summary>詳細を見る</summary>
    詳細です。詳細です。詳細です。詳細です。詳細です。詳細です。
</details>

＜実行結果＞

こんな感じ！
JSを書かず、HTMLだけで簡単にアコーディオンを実装できるのでめちゃくちゃ便利ですね。
ただ実務であんまり見たことないけど…

副業を始めるにしても最低でもwebサイトを作れないといけないので、ここでは無料でweb制作を独学で学べるサイトを紹介しようと思います。

「WEB制作で稼ぐまでのロードマップ！副業やフリーランスになりたい人向け」の記事も紹介しています。

webサイト制作を無料で学べるおすすめサイト

Progate（プロゲート）

SNSでもかなりの人がやっているイメージのProgate（プロゲート）。
スライドを読んで、実際に書いてみて学べるwebサイトです。
基礎の部分は無料で学べ、更に詳しく学びたい人は有料会員へというシステムになります。
これで何周もしてやった気になってしまう方が多いので、基礎を一回やったらさっさと何かを作ってみるが最短かなというのが個人的感想です。
基本的にwebサイト制作をするための環境などを用意しなくていいので、本当に初めてでハードルを限りなく低くという人におすすめです！

Progate（プロゲート）はこちら

ドットインストール

僕はこれではじめは学びました。
３分以内の動画を見て実際に自分の手を動かして学ぶ学習形態です。
個人的にはこれが一番できるようになるかなと思ってます。（しらんけど！
無料プランでも学べますが、今はちょっと有料の情報が多くなってきていて課金するならありかなと思うサービス。
これは、実際に自分で制作する環境から整えるので、学んだあとはすぐに製作に入れます。
使用するエディタなどの説明もあるので、環境構築から学ぶことができます。

ドットインストールはこちら

シラバス

マネして学べる、プログラミング学習サイト！
やはり何事も真似からスタート！
画面のコードを見ながら実際にやって学べるサイトです。
web制作以外にもwebアプリやwebデザインも学べます。
登録不要、完全無料というところがポイントが高いです。

シラバスはこちら

スキルを身につけたらココナラで案件を受けてみましょう！
ココナラでweb制作の仕事を受けるにはまずは下記から会員登録をしておきましょう。