【Web】ウェブおみくじのstyleをCSSで整える (Web勉強記 3日目)

投稿日:2019年8月4日
最終更新日:2019年8月4日

HTMLとJavaScriptで作成したおみくじをCSSで整える

作成中のWebおみくじだが、色が黒だけだしレイアウトも適当で見づらい。今の画面はこんな感じ↓

今回はCSSファイルを作成して、Webおみくじの色やレイアウトを整えたいと思う。ちなみにCSSファイル自体はWordPressの運営で触ったことはあるが、一からつくったことは無い。

 

CSSファイルを作成

以下のようにCSSファイルを作成した。

特にポイントというほどの記述も無いが、.button_omikujiでおみくじを引くボタンのclassを、#resultでおみくじ結果のidを指定し、stlyeを変更している。

 

CSSファイルをHTMLと同じディレクトリにおいてコミット

前回と同じ要領で、Github PagesにCSSをコミットする。すると、以下のようにCSSで作ったページが反映された↓

うーん…。見やすいかどうかは微妙だけど、CSSでStyleが変えられたから良しとする。

次回は、おみくじの結果によって文字の色が変わるように、JavaScriptで動的にHTMLのclassを書き換えてみようと思う。

 

参考書籍

今はこの本を読みながらHTML、CSS、JavaScriptの勉強してます。書籍のコードをなぞるだけだと面白味が無いしブログにものっけられないので、本で勉強したことをもとに何かつくり、コードを公開していくスタイルで日記を書いてます。最終的にはWebブラウザ上で動くゲームをつくって公開したい。

ゲームを作りながら楽しく学べるHTML5 CSS JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))

 

1+

投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください