脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

CSS

border-radiusで角丸にする/角丸を無効化する

CSS

border-radiusの使い方ボタンやformの角丸等はこれで対応できます 逆にbootstrap等でdefaultで角丸になっているいるものも無効化できます Example border-radius: 0; 角が90度になります 丸みは一切ありません border-radius: 100px; 丸みが出てきます borde…

CSS3だけ、もしくはJavaScriptだけでマウスオーバー時に色を変える方法

CSS

マウスオーバーで要素の色を変更する方法です。 CSS3 記法 <セレクタ>:hover 例 HTML <input id='test-button' type='button' value='Test Button' CSS input#test-button:hover { background-color: red; } Sassの場合 Sassの場合は以下のように書くことも出来ます。 <セレクタ> { background-color: red; &:hover { background-color: blue; } } Javascript JSの場合は、onMouseOverとonM…

[html/css] httpのフォームでDELETEやPUTのメソッドを送る方法

sinatraでAPIを作っていてはまったのだが、現在のブラウザはGETとPOSTの通信方式にしか対応していないらしい。 失敗例 <form method="delete" action="/"> <input type="text" name="textArea"> <input type="submit" value="delete!!"> </form> ↓ 192.168.33.1 - - [22/Jul/2015:03:08:16 +0000] "GET /?textArea= HTTP/1.1" 200 198 0.0008 こうやってdeleteを指定したにも関わ…

[html/css] html でtableのセル内とかで自動改行(折り返し)禁止にする方法(nowrap, whitespace)

htmlで自動で改行して欲しくいときに、改行(折り返し)禁止にする方法です。 こんな感じ こちらのセルは自動改行禁止にしています。 こちらのセルは自動改行禁止にしていません。 whitespace(CSSとして別で記述) htmlファイル <table border="1" width="500"> <tr> <td class="test">こちらのセルは自動改行<span style="color: #ff0000"><b>禁止</b></span>に</td></tr></table>…

[Lightbox] 画像クリック時に拡大して表示するLightboxの使い方

Lightboxの使い方このPageでは以下のLightboxの使い方を説明します。 http://lokeshdhakar.com/projects/lightbox2/そもそもLightboxとは何か?上のサイトのTOPページを見て頂けば一発ですが、画像をクリックした際にその画像をブラウザサイズに拡大するため…

[HTML/CSS]<li>タグで出てくる点を消したり、自動インデント下げを無効化する方法

liタグの点と自動インデント下げをなくす方法 結論から言うと以下で対応できます htmlの属性として埋め込む場合 <li style="list-style: none; margin-left: -20px;">hogehoge</li> cssで設定する場合 li.no-li-indent { list-style: none; margin-left: -20px; } 実例を踏まえて説明すると...例えば普通に四段くらい…