<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="CPM-program"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+JP&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Corben:700" rel="stylesheet"> <link rel="shortcut icon" href="../img/hataraku.png"> <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>CPM-program</title> </head> <body> <main> <div class="main"> <section class="view-left"> <div class="select-inner wrapper"> <h2 class="section-title">自身スコア一覧</h2> <ul class="select-item"> <li class="select-li"><a href="#"><div class="select-box"><div class="select-title-box"><p class="select-title">RinoIto</p></div><figure><%= image_tag '/squid.png' %></figure> <p class="select-text">Lv.17</p></div></a></li> <li class="select-li"><a href="#"><div class="select-box"><div class="select-title-box"><p class="select-title">総演習クリア数</p></div><figure><%= image_tag '/pc.png' %></figure> <p class="select-text">10個</p></div></a></li> <li class="select-li"><a href="#"><div class="select-box"><div class="select-title-box"><p class="select-title">週間達成度</p></div><figure><%= image_tag '/hart.png' %></figure> <p class="select-text">15%</p></div></a></li> </ul> </div> <div class="select-inner wrapper"> <h2 class="section-title">Ruby問題</h2> <ul class="ruby-slide-nuv"> <li class="ruby-slide-list"><p class="ruby-slide-title">1.プログラミングとは</p><p class="ruby-slide-text">・パソコンの使い方<br>・キーボードの打ち方<br>・プログラムの書き方</p></li> <li class="ruby-slide-list"><p class="ruby-slide-title">2.Rubyに触れてみよう</p><p class="ruby-slide-text">・値とは<br>・Rubyの計算<br>・変数とは</p></li> </ul> <ul class="ruby-slide-nuv"> <li class="ruby-slide-list"><p class="ruby-slide-title">3.printとgetsとprintf</p><p class="ruby-slide-text">・printの使い方<br>・getsの使い方<br>・printfとは</p></li> <li class="ruby-slide-list"><p class="ruby-slide-title">4.演算とは</p><p class="ruby-slide-text">・演算について<br>・色々な計算をみよう<br>・trueとfalseとは</p></li> </ul> </div> </section> <aside id="sidebar"> <section class="sidebar-box"> <div class="achieve-box"> <div class="achieve"><img src="/achieve.png" alt=""><p class="achive-text">3日連続ログイン達成</p></div> </div> <div class="corporate-box"> <div class="corporate-title-box"><p class="corporate-title">週間ランキング<span class="corporate-time">残り4日18:34</span></p></div> <ul class="ranking-nuv"> <li class="ranking-list"><a href="#"><p class="ranking-name"><span class="ranking-number gold">1位</span>広瀬雄二</p></a></li> <li class="ranking-list"><a href="#"><p class="ranking-name"><span class="ranking-number silber">2位</span>伊藤皓紀</p></a></li> <li class="ranking-list"><a href="#"><p class="ranking-name"><span class="ranking-number copper">3位</span>伊藤優</p></a></li> <li class="ranking-list"><a href="#"><p class="ranking-name"><span class="ranking-number">4位</span>伊藤理乃</p></a></li> <li class="ranking-list"><a href="#"><p class="ranking-name"><span class="ranking-number">5位</span>梅津航介</p></a></li> <li class="ranking-list"><a href="#"><p class="ranking-name"><span class="ranking-number">6位</span>鎌上朝妃</p></a></li> </ul> </div> </section> <p class="season-slide-title">今までの応用問題</p> <ul class="season-nuv"> <li class="season-list blue"><a href=""><span class="season-month">8月</span><p class="season-text">JavaScriptとは</p></a></li> <li class="season-list green"><a href=""><span class="season-month">9月</span><p class="season-text">Rubyを強化しよう!</p></a></li> <li class="season-list orange"><a href=""><span class="season-month">10月</span><p class="season-text">HTML&CSSとは</p></a></li> </ul> </aside> </section> </div> </main> <footer id="footer"> <small>© 2022 プチ論研究-伊藤理乃</small> </footer> </body> </html>