読者です 読者をやめる 読者になる 読者になる

Only you can free yourself.

25歳のゲイが自由になるまでのブログ

HTML/CSS/JSとだいぶ仲良くなれた感がある

エンジニア・プログラミング

2月に入って3つほど並行してコーディングをしている。

趣味でもあるし、勉強でもある。

 

どれもまだ中途半端なんだけど、ここでちょっと記録しておこうと思う。

 

1,個人サイトのデザイン変更

f:id:chuck0523:20150221205508p:plain

http://chuck0523.github.io/myPage/myPage/mypage.html

 

こんな感じ。PCの枠組みはCODEPREP様のレッスンを参考にした。

そしてその中に以前作ったものを埋め込んだ。 

年末最後のひとしごと 個人サイト作成 - chuckのブログ

 

でも、スクリーン部分が四角いのに、中身もブロックデザインなのはちょっと変な気がしてきた。

もうちょっと中身はシンプルにした方がいいかもしれない。

 

ちなみに観葉植物はフリー素材。ホントはこれもCSSで描画してみたい。。めちゃめちゃ難しそうだけど(ヽ'ω`)

 

 

スマホ対応は前回と変わらず。

f:id:chuck0523:20150104154500p:plain

これももうちょっと複雑にしたい。

せめてドロップダウンのメニューくらいにはしたい。

 

 

2,ロシア語 単語データベース作成

f:id:chuck0523:20150221210518p:plain

前々からやりたかった単語データの作成。

と言っても表に埋め込んだだけだけど

 

DataTablesというjQueryプラグインが高機能で最高だった。

 

でもさっき触ってたら描画の不具合を発見してしまった。。直さなくては。

 

 

3,好きなものデータベース作成

好きなもののデータベースを作った。

 ここまで来ると完全に自己満足の世界だ。でも、僕は変わり者だからそれでいいのだ

 

こちらが初期画面。左に大カテゴリが並んでいる。

f:id:chuck0523:20150221211137p:plain

 

カーソルを合わせると上部にサブカテゴリが出てくる。

f:id:chuck0523:20150221211147p:plain

 

さらにサブカテゴリをカーソルすると、項目が出てくる。

f:id:chuck0523:20150221211159p:plain

 

項目にカーソルすると、文章や写真や動画が表示される。

f:id:chuck0523:20150221211211p:plain

 

と言った具合。

 

HTML的には<ul />を4重構造にして、下位のドキュメントをデフォルトで非表示にしてある。

すべてのデータは配列やらオブジェクトに格納されていて、それをループで配置させた。

そして$('ul li')にhoverイベントでtoggle()して表示させている。

 

ulの領域作成に苦労したくらいで、cssはだいぶ自在に使えるようになってきた。

float,position,displayの組み合わせを理解していると、表現の幅がかなり広がる。

 

こちらはまだ装飾が足りないので未公開。

 

 

総評

まだまだ自己満足のレベルだけど、コーディングはやっぱり楽しい。

気づいたら4,5時間経ってて驚く(ヽ'ω`)

 

でもここに来て、限界を感じ始めている。つまり、扱うデータが増えてきてHTML/CSS/JSだけでは煩雑になってきた。

でも残念ながらDBのこととがぜんぜん分からないんだよね。Javaもまだ初心者だし。

サーバサイドのことを勉強し始めたいな。。

 

あと、今(クロームブック)より性能の良いパソコンが欲しい(ヽ'ω`)

TOPへ