Rokiのチラ裏

学生による学習のログ

HTML5/CSS3

たんぶらーくらいあんと

github.com 二ヶ月半ほど前に一度 Electron を触っておこうと思い作り始め、二ヶ月前にもう作るのに飽きてしまったたんぶらーくらいあんとについてブログに特別載せていなかったので一応リンクを載せておく事にした。一応上記リポジトリから動いている様子も…

縦横比率を維持しつつ、横幅に合わせて画像を囲うボックスのheightを可変的に取る

仕事(アルバイト)でWebページを弄っている。widthとの比率が考慮されたheightを可変的に取らなければならない問題があり、cssだけでなんとかできないものかと考えていたが、思いつかなかったのでjqueryを使った話。 @530506 画像をimgタグでベタ貼りした時の…

あ、ハッピーハロッウィンッ!

そんなわけで、2016年になってもう11ヶ月も経とうとしているわけだが世間はハッピーハロウィンである。渋谷が凄い。そんなわけで、デベロパツール上でパラパラアニメが見れるウェブサイトを公開した。 @530506 こんな感じで、無駄に動く。 pic.twitter.com/i…

親クラスが動的なheightを持つ場合の一行テキストをjavascriptで縦横中央に配置する

考えれば分かる事だが、ウェブサイトを書いていて一考えしたので、一応メモ。 縦横中奥に配置するには、CSSのみで設定することができる。 #holder{ position:relative; } #title { position:absolute; top:-50%; left:50%; transform:translate(-50%,-50%);}…

javascriptを用いた演習

を学校でしたので備忘録的にあげてみる。設定した高さとスクロールに応じてTopにジャンプするボタンを表示させる 文字の大きさを変動させる 乱数 ボタンの設定 凄くセマンティックスが直接的なシンタックスだなあ。是非ともC++を触りたくな〜る

なんとなくブログタイトルの下にメニューバーを書いた

たまたまはてなブログのカスタマイズを見てみたらHTMLが書けるようだったので、ブログのタイトル下部に特に意味もない簡単なメニューバーを自前で書いて置いてみた。(PCのみ) <style> ul,li{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-a…

negative marginでul1つを3つのカラムに配置する。

negative margin、一見ややこしいが理解し始めると強力な気がする。 ただし無意味な多様はやはり厳禁なのかな。 一つのulで実装されたリストをネガティブマージンを使用して、3カラムに配置する方法のメモ。 個人的にHTMLのコンテキストを考慮すると一つのリ…

Amazonのパクリサイトのようなモノ書いてみた。

書いてみた。画像は読み込めないけど。

3カラムページの両端を固定幅に指定し中央を可変にする

最近今年の四月ぐらいからウェブサイトマークアップを本格的に学習する機会が増えて、色々な疑問が浮かび上がってくるので、解決法を模索したりする事が多いのだが、今回の表題が自分にとっては規格外的な発想で書き上げていたのでメモ。 floatでボックスを3…