blog.waterlow.work

Ruby, Rails, js, etc...

【js】【css】資格対策サイトができた!!

肝心な問題部分はかなり少ないですが! Ruby���Ѽ�ǧ��Gold f:id:waterlow2013:20140612231828p:plain はじめはRubyの対策サイトということでメタプロごりごり使って問題文から動的に選択肢を作って、「これがRubyだ!」というものを作ろうとしていました。 しかし最終的には「振る舞いや効果が同じであれば、なるべく早く書けるものがいい!」と思うようになりました。結果jsとcssの勉強オンリーになってしまいましたが、とても楽しかったので良かったです。(リファクタリングしっかりしよう)

Rubyの道はまだまだ長いですが頑張ります! 以下ソース *** html、js

|javascript| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">

<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>技術者認定Gold

Ruby技術者認定Gold練習問題






||<

*** css

|css| @charset "utf-8";

/ --- 全体の背景・テキスト --- / body { margin: 0; padding: 0; background-color: #f9f9f9; / 全体の背景色 / color: #000; / 全体の文字色 / font-size: 100%; / 全体の文字サイズ / }

/ --- 全体のリンクテキスト --- / a:visited { color: #800080; } a:active { color: #f00; }

/ --- コンテンツ --- /

content {

padding: 20px 50px 20px 30px; background-color: #ffd; / コンテンツの背景色 / }

p.sample { color: #CF355D; }

hr { border-top: 1px dotted #bbb; border-bottom: 1px dotted #fff; width: 700px; text-align: left; margin-left: 0px; }

.heading8 { position:relative; width:300px; padding:9px; padding-left:15px; font-weight: bold; font-size: 18px; background-color: #fc6; color: #fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }

.button { display: inline-block; width: 100px; height: 30px; text-align: center; text-decoration: none; line-height: 27px; outline: none; } .button::before, .button::after { position: absolute; z-index: -1; display: block; content: ''; } .button, .button::before, .button::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } .button { background-color: #fc6; color: #fff; } .button:hover { background-color: #FF1A6F; }

.button2 { display: inline-block; width: 100px; height: 30px; text-align: center; text-decoration: none; line-height: 27px; outline: none; } .button2::before, .button2::after { position: absolute; z-index: -1; display: block; content: ''; } .button2, .button2::before, .button2::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } .button2 { background-color: #FF1A6F; color: #fff; } .button2:hover { background-color: #fc6; } ||<