プログラミングは反復練習が大切。

コードドリルはプログラミング初心者のためのタイピング学習サービスです。ソースコードタイピングを反復練習することで自然に体得できます。

Driller's Code
ドリラーが作成した公開中のコードをリストアップしています。
2024-2-10
PythonPracticeFromChatGPT

								def read_data_from_file(filename):
    try:
        with open(filename, 'r') as file:
            data = file.readlines()
            data = [line.strip() for line in data]
        r...								
2023-12-25
アナログ時計を描画する

								const canvas = document.getElementById('analogClock');
const ctx = canvas.getContext('2d');

// Center
const radius = (canvas.width / 2) - 10;
const centerX = (canvas.width...								
2023-12-24
canvasを用いてJavaScriptで現在時刻を表示する

								function drawDigitalClock() {
  const canvas = document.getElementById('clockCanvas');
  const context = canvas.getContext('2d');
  const now = new Date();
  const hours = n...								
2023-12-24
ランダムな整数を生成する関数

								function randomt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const randomValue = random(1, 10);
console.log(randomValue);								
2023-10-25
SQLでHello World!

								select "Hello Wolrd!"								
2023-9-13
文字の色を変える アンダーlineを消す

								/*/*<html>*/
/*<a href="#">スイカの種飛ばすなよ!</a>の文字を黒にしましょう*/
/*アンダーラインあるらしい?設定なので消してください*/

a {
  color: #000;
  text-deco...								
2023-5-20
a

								<?php
echo "としき";								
2020-6-27
3カラムレイアウト HTML

								<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3カラムレイアウト</title>
<link rel="stylesheet" href...								
2020-6-13
練習用コード 文字の背景・スタイルの表示

								<!DOCTYPE html>
<html>
    <body>
      <h1>Headline</h1>
      <div
style="background-color:green;color:white; padding:20px;">
         <p>...								
2020-6-12
関連する他のファイルを示す

								<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>link要素サンプル</title>
     <link rel="previous&q...								
2020-6-11
練習用 自己紹介

								<!DOCTYPE html>
<html>
    <head>
        <title>My Blog</title>
        <link
href="http://fonts.googleapis.com/css?family=Handlee" rel="styles...								
2020-6-11
練習用コード その1

								<!DOCTYPE html>
<html>
    <head>
        <title>first page</title>
    </head>
    <body>
        <p>this is a paragraph</p>
        &l...								
2020-6-10
HTMLの型

								<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Progateとは</h1>
    <p>オンラインプログラミング学習サービスです</p>
  </b...								
2020-6-3
色の使用(css)

								.box{
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  ali...								
2020-6-3
色の使用(css)

								.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}								
2020-6-3
色の使用

								<div class="wrapper">
  <div class="box boxLeft">
    <p>
      This is the first box.
    </p>
  </div>
  <div class="box boxRight&q...								
2020-6-3
要素を左右に配置

								.footer-logo{
  font-size: 32px;
  float: left;
}

.footer-list{
  float: right;
}

.footer-list li{
  padding-bottom: 20px;
}
								
2020-6-3
ロゴとリストの配置

								li{
  float: right;
}
								
2020-6-1
paddingをまとめて書こう

								.logo{
  padding: 20px 10px 20px 10px;
}


.logo{
  padding: 20px 10px;
}
								
2020-6-1
要素に余白

								.logo1 {
  padding: 20px;
}
								
2020-6-1
floatプロパティ

								li{
  list-style: none;
  float: left;
}								
2020-6-1
ヘッダー

								.header-logo{
  float: left;
  font-size: 36px;
}
								
2020-6-1
CSSの読み込み

								<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>progate</title>
    <link rel="stylesheet" href="styleshee...								
2020-5-30
brで改行

								<p>これは
例です</p>
<p>ここで<br>改行します。</p>								
2020-5-30
olとliで番号付の箇条書きに

								<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>								
2020-5-30
ul・ol・liで箇条書きを作る

								<ul>
 <li>ひとつめの項目</li>
 <li>ふたつめの項目</li>
 <li>みっつめの項目</li>
</ul>
								
2020-5-30
aタグでリンクをつくる

								<p>顔を踏んでね↓</p>
<p>
<a href="https://saruwakakun.com/">
<img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="...								
2020-5-29
サンプルコード

								<!DOCTYPE html>
<html>
<head>
<title>タイトル入力</title>
</head>
<body>
<h1>ゼロからウェブデザインを勉強しよう!</h1>
<p>まずはHTM...								
2020-5-3
svm

								from sklearn.datasets import fetch_openml
mnist = fetch_openml('mnist_784', version=1,)
print(mnist.data.shape)
print(mnist.data)
print(mnist.target)
from sklearn.model_selection imp...								
2020-5-1
練習

								〈!doctype html〉
〈html〉
〈head〉
〈h3〉練習練習練習〈/h3〉
〈/head〉
〈body〉
〈h1〉練習の練習〈/h1〉
〈/body〉
〈/ html〉

								
Tools

ソースコード練習

無料ユーザー登録でソースコードを自由にアップロードして効率的な練習ができます。また、エディタ設定や気になるコードのストック機能の他、ボタン1つで打ち間違いを検証する差分チェックも使用できます。

タイピング練習

タイマー設定が無いので時間に捉われる事なく、収録してある言語からただひたすら文字列をタイピングできます。また、よく使用する文字列だけリストにする事ができるので効率よく練習ができます。
Contents
エディタ設定
カラースキーム34種類・フォントサイズ・自動補完・インデントを自分好みに設定可能
ストック機能
気になるソースコードを保存できるのでいつでも素早くアクセス可能
ソースコードアップロード
ソースコードを自由にアップロード&編集および自由に公開設定が可能
差分チェック
見本コードと自分のコードの違いをボタン1つでハイライト表示
ソースコードアップロードの公開範囲は設定で管理できます。
公開
すべてのユーザーが閲覧できます。公開したコードに参照先URLをつけて、ブログ等に案内することも可能です。
限定公開
リンクを知っているユーザーが表示し、共有することができます。検索や一覧にも表示されないため、特定の人またはグループのみで共有したい時に便利な設定です。
非公開
検索や一覧または他のユーザーにも表示しないで、自分のみが利用したい場合は非公開に設定しましょう。
Plans
ゲストユーザー
Guest
-
  • タイピング練習
  • ソースコード練習
  • ストック機能
  • エディタ設定
  • ソースコードアップロード
  • 差分チェック
Sing up
News
  • コードドリルユーザー(ドリラー)が公開中のコードリストをトップページに表示し、ドリラーページを追加しました。
  • 2023年4月30日をもってプレミアムサービスを終了致します。それに伴い、プレミアムサービスの新規受付を終了致しました。
  • バージョンアップ&プレミアムサービスを公開しました。