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

やるしかなっちゃん

やるしかない!

ライブラリを使わない生のJavaScriptだけで作るドロワーメニュー

めちゃくちゃシンプルなやつだけど作った 最早jQueryさえも使わない縛り jsfiddle.net <html> <head> <link rel="stylesheet" type="text/css" href="index.css" /> <script type="text/javascript" src="index.js"></script> </head> <body> <header class="header"> <div id="open-btn" class="open-btn show" onclick="openMenu();"></div></header></body></html>

コーディングTIPS集

1. 画像の縦横比維持 CSSで画像の縦横比を維持したまま縮小する方法 - やるしかなっちゃん 2. 文字数カウントフォーム jQuery: inputやtextareaの文字数カウントの方法 - やるしかなっちゃん 3. ドロワーメニュー ライブラリを使わない生のJavaScriptだけで…

lessのcalcに死ぬほどハマった件

題名の通りのlessのcalcにとんでもない落とし穴があって今日見事にハマってしまった。 どんな落とし穴かというと下のようなよくあるcalcを書くとする。 width: calc(100% - 90px); これをCSSにコンパイルすると下のようになる width: calc(10%); 100% - 90%…

box-sizingとは

ボックスのサイズを指定するものだった ただそれだけ デフォルト値はcontent-boxで幅と高さのサイズにmarginとpaddingを含まない (なので指定したwidthやheightより大きくなるということがある) border-boxを指定するとmarginとpaddingをサイズに含む ほんと…

CSSで画像の縦横比を維持したまま縮小する方法

max-width/max-heigthで最大値を指定して、widthとheightプロパティをautoにすればタイトル通りのことを実現できた /* 横に合わせる場合 */ max-width: 100%; height: auto; /* 縦に合わせる場合 */ max-height: 100%; width: auto; jsfiddle.net 参考サイト…