脳汁portal

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

トップ > HTML

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

JavaScript HTML React 
render: function() {
    return (
        <div class='foo'>Hello React!!</p>
    );
}

上記のように直接class属性を指定しようするとエラーが出て怒られます
Warning: Unknown DOM property class. Did you mean className?

これはclassという文字がReact側で予約後として他で使われているために発生するエラーです。
解決法もその後に書いてありますが、classNameを使えば解決します。

render: function() {
    return (
        <div className='foo'>Hello React!!</div>
    );
}

また、idはそのまま使えます

.
.
        <div id='bar'>Hello React!!</p>
.
.

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

html css ruby Sinatra

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を指定したにも関わらずGETになってしまう。

対応方法

hidden属性でnameを_methodにし、valueを使いたい方式にすればいけるようです。

DELETE
<form method="post" action="/">
    <input type="text" name="textArea">
    <input type="hidden" name="_method" value="DELETE"> <!-- この1行を追加！ -->
    <input type="submit" value="delete!!">
</form>

↓

192.168.33.1 - - [22/Jul/2015:03:12:27 +0000] "DELETE / HTTP/1.1" 200 212 0.0014

DELETEになってる！

PUT

PUTも同じようにDELETEをPUTに変更するだけ

<form method="post" action="/">
    <input type="text" name="textArea">
    <input type="hidden" name="_method" value="PUT"> <!-- この1行を追加！ -->
    <input type="submit" value="delete!!">
</form>

↓

192.168.33.1 - - [22/Jul/2015:03:13:42 +0000] "PUT / HTTP/1.1" 404 466 0.0010

PUTになってる！

Rails

Railsでも内部で同じことをしているらしい
link_to - リファレンス - - Railsドキュメント

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

html css

htmlで自動で改行して欲しくいときに、改行(折り返し)禁止にする方法です。

こんな感じ

こちらのセルは自動改行禁止にしています。 こちらのセルは自動改行禁止にしていません。

whitespace(CSSとして別で記述)

htmlファイル

<table border="1" width="500">
  <tr>
    <td class="test">こちらのセルは自動改行<span style="color: #ff0000"><b>禁止</b></span>にしています。</td>
    <td>こちらのセルは自動改行禁止にしていません。</td>
  </tr>
</table>

CSSファイル

.test {
  white-space: nowrap;
}

nowrap(タグ内に直接記述)

HTMLファイル

<table border="1" width="500">
  <tr>
    <td nowrap>こちらのセルは自動改行<span style="color: #ff0000"><b>禁止</b></span>にしています。</td>
    <td>こちらのセルは自動改行禁止にしていません。</td>
  </tr>
</table>
  • 3行目のnowrapをつけると改行禁止になります
  • ただしこのやり方は現在は非推奨となっているので、今後使えなくなる可能性があります。

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

HTML CSS JavaScript

Lightboxの使い方

このPageでは以下のLightboxの使い方を説明します。
http://lokeshdhakar.com/projects/lightbox2/

そもそもLightboxとは何か？

上のサイトのTOPページを見て頂けば一発ですが、画像をクリックした際にその画像をブラウザサイズに拡大するためのツールです。

使い方

1. LightBoxのダウンロード
まずは公式サイト(http://lokeshdhakar.com/projects/lightbox2/)からLightboxをダウンロードしてきましょう。
ダウンロードしてきたファイルを解凍すると以下のような構造になっています。

lightbox
  |-css
  |  |-"lightbox.css"
  |  |-"screen.css"
  |
  |-"img"
  |  |-demopage
  |  |-close.png
  |  |-loading.png
  |  |-next.png
  |  |-prev.png
  |
  |-js
  |  |-"jquery-1.11.0.min.js"
  |  |-jquery-1.11.0.min.map
  |  |-lightbox.js
  |  |-"lightbox.min.js"
  |  |-lightbox.min.map
  |  
  |-index.html
  |-README.markdown

このディレクトリにはデモページやデモ画像なども色々入っているのですが、ここで重要なのは以下の5ファイル(ディレクトリ)です。

2. まずはlightboxを使用したいファイルで上記のcssファイルとlightboxファイルを, jqueryを読み込みます。
展開してきたlightboxディレクトリに作成する場合は、以下のように書きます。

<html>
<head>
	<link rel="stylesheet" href="css/screen.css">
	<link rel="stylesheet" href="./css/lightbox.css">
</head>
<body>
	hogehoge
	<script src="./js/jquery-1.11.0.min.js"></script>
	<script src="./js/lightbox.js"></script>
</body>
</html>

これでもうlightboxを使用する準備は出来ました。
imgファイルに関しては、lightbox.cssに使用するための記述が書かれていますので、
このディレクトリ構造のままの場合は特に何もする必要はありません。

/* Preload images */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}
.
.
.

3. 画像を指定する
まずは最低限としてbodyタグの中に以下のように書けばLightBoxの機能は使用できます

<a href="img/demopage/image-1.jpg" data-lightbox="hoge">
	<img width="25%" src="img/demopage/image-1.jpg" />
</a>

順に説明していくと、
1行目　< a href="img/demopage/image-1.jpg" data-lightbox="hoge" >

  • 実際に拡大された後にされる画像を設定します。
  • data-lightbox属性に関しては何かしら値をいれないと拡大時の動きが変化してしまいます(hogehogeに意味はありません)

2行目　< img width="25%" src="img/demopage/image-1.jpg" / >

  • 拡大される前(クリックされる前)の画像の設定をします。
  • 今回は同じ画像を使い、サイズを25％に縮小して表示しています。

これでシンプルなLightboxの拡大機能は使用することが出来ます。

+α

マウスオーバー時に画像に青く枠を表示させる

<a href="img/demopage/image-1.jpg" data-lightbox="hoge">
	<img class="blue-frame" width="25%" src="img/demopage/image-1.jpg" />
</a>

上記のように2行目でblue-frameクラスを指定して、以下のcssを読み込ませば完了です。

.blue-frame {
  display: inline-block;
  padding: 4px;
  margin:0 0.5rem 1rem 0.5rem;
  background-color: #fff;
  line-height: 0;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  -ms-border-radius:6px;
  -o-border-radius:6px;
  bordr-radius: 6px;
}

.blue-frame:hover {
  background-color: #4ae;
}

クリックで次の画像に送れるようにする。

まずは準備として画像を3つに増やします。

	<a href="img/demopage/image-1.jpg" data-lightbox="hoge">
		<img class="blue-frame" width="25%" src="img/demopage/image-1.jpg" />
	</a>
	<a href="img/demopage/image-2.jpg" data-lightbox="fuga">
		<img class="blue-frame" width="25%" src="img/demopage/image-2.jpg" />
	</a>
	<a href="img/demopage/image-3.jpg" data-lightbox="hoge">
		<img class="blue-frame" width="25%" src="img/demopage/image-3.jpg" />
	</a>

準備と書きましたがこれで完了です。
ここではじめてdata-lightbox属性が意味を成します。

  • image-1.jpgとimage-3.jpgのdata-lightbox属性の値は同じなので、画像を拡大した際に左右に矢印マークが出てきて、それぞれの画像に変更することが出来ます。
  • しかしimage-2.jpgのdata-lightbox属性の値は他の二つと異なるので、image-2.jpgは飛ばされて表示をされます。

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

HTML CSS

liタグの点と自動インデント下げをなくす方法


結論から言うと以下で対応できます


htmlの属性として埋め込む場合

<li style="list-style: none; margin-left: -20px;">hogehoge</li>

cssで設定する場合

li.no-li-indent {
  list-style: none;
  margin-left: -20px;
}

実例を踏まえて説明すると...

例えば普通に四段くらい掘り下げる以下のようなコードを書くと、

<ul>
  <li>一段目A</li>
  <li>一段目B</li>
  <ul>
    <li>二段目A</li>
    <ul>
      <li>確認項目(三段目A)</li>
      <ul>
        <li>確認項目①(四段目A)</li>
        <li>確認項目②(四段目B)</li>
        <li>確認項目③(四段目C)</li>
      </ul>
    </ul>
  </ul>
  <li>一段目C</li>
</ul>

↓

  • 一段目A
  • 一段目B
    • 二段目A
      • 確認項目(三段目A)
        • 確認項目①(四段目A)
        • 確認項目②(四段目B)
        • 確認項目③(四段目C)
  • 一段目C

こうなってちょっと見にくいですね。


ここで三段目Aを４段目を同じ位置にしてしまいます。

<ul>
  <li>一段目A</li>
  <li>一段目B</li>
  <ul>
    <li>二段目A</li>
    <ul>
      <li>確認項目(三段目A)</li>
      <li>確認項目①(四段目A)</li>
      <li>確認項目②(四段目B)</li>
      <li>確認項目③(四段目C)</li>
    </ul>
  </ul>
  <li>一段目C</li>
</ul>

↓

  • 一段目A
  • 一段目B
    • 二段目A
      • 確認項目(三段目A)
      • 確認項目①(三段目B)
      • 確認項目②(三段目C)
      • 確認項目③(三段目D)
  • 一段目C

ここで確認項目(三段目A)の点を外します。

<ul>
  <li>一段目A</li>
  <li>一段目B</li>
  <ul>
    <li>二段目A</li>
    <ul>
      <li style="list-style: none;">確認項目(三段目A)</li>
      <li>確認項目①(四段目A)</li>
      <li>確認項目②(四段目B)</li>
      <li>確認項目③(四段目C)</li>
    </ul>
  </ul>
  <li>一段目C</li>
</ul>

↓

  • 一段目A
  • 一段目B
    • 二段目A
      • 確認項目(三段目A)
      • 確認項目①(四段目A)
      • 確認項目②(四段目B)
      • 確認項目③(四段目C)
  • 一段目C

違和感ありまくりなので、確認項目(三段目A)の自動インデントを無効、というか左へずらします。

<ul>
  <li>一段目A</li>
  <li>一段目B</li>
  <ul>
    <li>二段目A</li>
    <ul>
      <li style="list-style: none; margin-left: -20px;">確認項目(三段目A)</li>
      <li>確認項目①(四段目A)</li>
      <li>確認項目②(四段目B)</li>
      <li>確認項目③(四段目C)</li>
    </ul>
  </ul>
  <li>一段目C</li>
</ul>

↓

  • 一段目A
  • 一段目B
    • 二段目A
      • 確認項目(三段目A)
      • 確認項目①(四段目A)
      • 確認項目②(四段目B)
      • 確認項目③(四段目C)
  • 一段目C

下線なんかも加えるともっと見やすくなりますね。

  • 一段目A
  • 一段目B
    • 二段目A
      • 確認項目(三段目A)
      • 確認項目①(四段目A)
      • 確認項目②(四段目B)
      • 確認項目③(四段目C)
  • 一段目C

CSSで書く場合には

li.no-li-indent {
  list-style: none;
  margin-left: -20px;
  text-decoration: underline;
}

<li style="list-style: none; margin-left: -20px; text-decoration: underline;">確認項目(三段目A)</li>
↓
<li class="no-li-indent">確認項目(三段目A)</li>

とすればOKです。こちらの方が簡単だし使い回しが出来るのでbetterですね。