脳汁portal

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

HTML

画像を重ねる方法(positionとかtopとか)

html5で画像を重ねて表示する方法 毎回力技でやっているので備忘録として 使用するpropertyは主にpositionとz-indexと位置に関するtop/left/bottom/right 基点の指定(position) relative, absolute, static, fixedをとる 指定しない場合のデフォルトはstatic…

Bootstrapのカルーセル機能の使用方法

carousel 複数の画像が一定間隔でスライドしていく機能のことです 詳しくは下記のリンクをご参照ください。 http://getbootstrap.com/2.3.2/javascript.html#carousel 使い方 <div id="test-carousel" class="carousel slide" data-ride="carousel" data-interval="3000"> <ol class="carousel-indicators"> </ol></div>

bootstrapとjqueryでタブ表示を作成する方法

必要なもの bootstrap jquery 手順 まずはTabのheaderを作成します。 <div id="tabs"> <ul> <li><a id="tabs1" href="#content1">Tab1</a></li> <li><a id="tabs2" href="#content2">Tab2</a></li> </ul> </div> するとこんな感じのtabが出来ます 次にタブの中のコンテンツを作成します。 <div id="tabs"> </div>

tablesoterをRailsで使う方法 + FilterとSort機能の使い方

jueryプラグインのtablesorterをRailsで使う方法です。tablesorterはtableをsortしたりfilteringするjQueryプラグインです。 ソースコード まずはじめに、tablesorterには本家とforkして他の人が開発しているPageの二つのドキュメントがあります 本家: http…

Reactでinputタグのautofocusを使うには

html HTML5ではinputタグの中にautofocusと書けば、Pageを表示した際に自動でフォーカスを合わせてくれます。 <input autofocus>-HTML5タグリファレンス React しかし、Reactでは下のように普通にinputタグ内にautofocusと書いても反映されません。 var Test = React.createC…

inputタグで入力中に出てくる青い枠を消す方法

inputタグでテキストボックスに入力している最中に出てくる青い枠線を消す方法です。 input[type="text"]:focus { outline: 0; }

Reactのstate(prop)内で改行文字を使いたい場合

JSX構文 ReactはJSXを採用しているので、構文の中で以下のようにhtmlタグを直接書くようににコーディングできます。 var Test = React.createClass( { // 処理とか }, render: function() { return( <div> {this.state.foobar} </div> ); } ); しかし、このhtmlタグライ…

ReactのJSX構文内でclass属性を設定する場合

render: function() { return ( <div class='foo'>Hello React!!</p> ); } 上記のように直接class属性を指定しようするとエラーが出て怒られます Warning: Unknown DOM property class. Did you mean className?これはclassという文字がReact側で予約後として他で使われているため…

[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; } 実例を踏まえて説明すると...例えば普通に四段くらい…