CSSでAuto Text機能のスタイリングをしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、画面上に指定した文字列が自動的に表示されるAuto Text機能のスタイリングをCSSで実装します。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやdivは、HTML要素です。

全体の設定

bodyの設定

divの設定

inputの設定

これで、完成です。

おわりに

今日は、少し簡単すぎましたか?いやいや、皆さんのレベルが上がったんですよ^^(私も含めて、ね)

毎日手を動かしていると段々とわかるようになってきますよね。何も考えなくても実装ができるようになるというか。

CSSの学習を終えたらオリジナルアプリを作ろうと思うので、よろしくお願いします!

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す