思考のジャンプ幅が狭いなら,飛ぶ回数で補えばいいじゃない!!

非情報系30歳が競技プログラミングやWeb開発を始めるとどうなるか?

AtCoder AC Steps:HTML5でHomeページを書く

結論

  • HTML5の基礎要素に,入門書で読んだタグを使ってリンクを貼った.

今日の進捗

f:id:hiro_kato:20190427000353j:plain
AtCoder AC StepsのHomeページの完成イメージ

注釈
  • ☆マークは,問題を解いたときにつまづいた点を表す.
凡例の候補
  • 解けず:問題を解けず.
  • 発想:思いつけば比較的簡単.そう思いつきされすれば…
  • 考察:考察できないもしくは見落とした部分があった.
  • 理解:解説などを読んだが理解に時間を要したもしくは理解があやふや.
  • 実装:考察できたものの,実装できなかった.

試したこと

  • AtCoder AC Stepsを今持っている技術で,実装してみる.
  • bodyタグ内に簡単なコードを追加した.
  • h2タグを使って,タイトルを表示した.
  • リスト表記およびリンク用のタグを使って,AtCoderのABC124のA~D問題までのリンクを貼った.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>AtCoder AC Steps</title>
</head>
<body>
    <h2>AtCoder AC Steps</h2>
    <li><a href="https://atcoder.jp/contests/abc124/tasks/abc124_a">ABC124: A - Buttons</a></li>
    <li><a href="https://atcoder.jp/contests/abc124/tasks/abc124_b">ABC124: B - Great Ocean View</a></li>
    <li><a href="https://atcoder.jp/contests/abc124/tasks/abc124_c">ABC124: C - Coloring Colorfully</a></li>
    <li><a href="https://atcoder.jp/contests/abc124/tasks/abc124_d">ABC124: D - Handstand</a></li>
</body>
</html>

明日以降の課題

  • 問題のリンクの横に,トグルボタンを配置できるようにする.
  • 見た目を整える.