2025年06月24日
『人生歴の表と1日のスケジュール表をCSSのみで実現』
ポートフォリオでよくみる人生歴の表を作ってみたかったので作成してみました。また、この構造を応用すると"こんなのあったらいいな"を実現できるのではないかと思いテーマに選びました。
実現したいものは、1日のスケジュールが入力できる表です。
このスケジュール表は、学校や仕事のスケジュール管理に使用したいと思っています。
liタグを使用しており、li全体の構成はこのようになっています。
liタグの中が一つの予定分です。
時間を表示している部分(span)はcssでulより外側で表示するように配置しています。
実際のHTML構成
See the Pen 人生歴 HTMLのみ by R.Tanaka (@TanakaR) on CodePen.
CSS(コードペンに詳細有り)
liの中をtextareaに変更して、自由に入力できるボックスを作ることでスケジュール表にしました。コメントボックスは先生や上司の方がピンポイントでコメントを入れれると便利で活用しやすいと思ったので作っています。また、入力したスケジュールをtxtでコピーできるような仕組みも入れてみました。
稼働内容
稼働内容
コメント
稼働内容
コメント
稼働内容
コメント
今回liを活かして人生歴の表を作成してみましたが、ポジションの細かい位置設定に時間がかかりました。また、制作中にtableタグなどでもっと早くて便利なスケジュール表が作れるかもと思いました。
もし仕事で何か制作しないといけないとなると、限られた時間の中で求められた条件のものを作らなければいけないので、知識と事前準備はとても大切なんだと改めて感じました。
スケジュール表のtxtへ変更するプログラムはAIに作成してもらいましたので、今後は自分でプログラムが組めるようにJavascriptの勉強を深めたいです。まずは、プログラムの構文をしっかり理解し、組まれているプログラムを一人で解読できるようにすることを目標にしています。
コメント