Netbeans文字化け対策 初期設定をutf-8に変更する方法

netbeans7.4が出ていたのでバージョンアップしたら、プロジェクトで定義していないファイル(文字コードutf-8のphpファイル)が文字化けしたので、初期設定をutf-8にする方法のメモです。

*追記 2014/06/16) 新しいバージョンの8.0がリリースされました。8.0でも動作確認OKでした。

参照サイト 初心者に優しいWPカスタマイズ NetBeansの文字コードをUTF-8に http://wiki.netbeans.org/ FaqPHPDebugEncodingJa

新規プロジェクトを作るときに、デフォルトのエンコーディングをutf-8にします。

netbeasn

通常はこれでプロジェクト内のファイルはutf-8になり、特に問題は有りません。 問題は、プロジェクトに登録していないファイルをちょっと編集したい時に、ドラッグ&ドロップで開くと見事に文字化けしています。

netbeansでは昔からバグ扱いされていたと思うのですが、いまだにそのままです。面倒ですが、設定ファイルを上記参考サイトを参考にチョビットいじります。

インストールフォルダー / etc / の netbeans.conf ファイルを開きます(編集できない時は、一度デスクトップなどにコピーして編集してください) 次に、netbeans_default_options の行に -J-Dfile.encoding=UTF-8 を追記します。

無題

これでutf-8で開けます。 Netbeansの[ツール] – [オプション]で、日本語対応のフォントを使っていないとだめです。

 

rem単位とem(%)、nth-childとnth-of-typeの違いについてについて。便利なCSS3

またCSS3についてです。フロントコーディングをしてると発見が多いですね。 ちなみに、rem単位とem(%)、nth-child,nth-of-typeは関係ないのですが、短いので一緒の記事に書いています。

rem単位とem(%)の違い

CSS3で新しく追加された単位で、em,%に似た文字サイズを相対的に指定する単位です。 こちらで詳しく載っています。 CSS3の新単位remで、文字サイズの指定を分かりやすく 結果的には、<html>に対しての相対指定値になるようです。 %やemが親のサイズは親の値に対しての値なので、把握し辛くなるのに対して管理しやすそうです。

html { font-size: 16px; }
ul, p { font-size: 0.8rem; } /* 12.8px */
h1 { font-size: 1.6rem; } /* 25.6px */

 

</pre>
<ul>
	<li>リスト1</li>
	<li>
<ul>
	<li>リスト2</li>
</ul>
</li>
</ul>
<pre>

リスト1とリスト2は同じフォントサイズになります。 0.8em(%)だと、リスト1よりリスト2の方が小さくなります。

nth-childとnth-of-typeの違い

こちらもCSS3で追加された疑似要、素最近よく使うのでメモ

途中記事:::

http://weboook.blog22.fc2.com/blog-entry-285.html

pointer-events でマウスイベントを無効化する

編集中記事です><

CSS3のpointer-eventsプロパティーでaタグのリンクを無効化できるようなので調べてみたら、マウスイベント自体を無効化出来てしまうようなので、ちょっと実験してみた

<style type="text/css">
a.link {
pointer-events: none;
}
</style>
<a class="link" href="#">リンク1</a>
sample : リンク1
test_button
リンク画像a img タグの時

 
onClick の時

 

jquery onClickの時

最近よく使う overflow について、まとめてみました。

floatの対策に、overflow: auto;(hidden) floatしたときに、要素が浮いて親の高さ小さくなってしまう対策で、親にclearfixの代わりに使えます。

hogehoge

hogehoge
#parent {
    overflow: auto;
}
#child {
    float: left;
}

overflow: hidden でもいいのですが、はみでる要素が消えてしまう場合があるので auto がよさげ 同時に

 #parent {
     overflow: auto;
     height: 100%;
     clear: both;
 }

するとさらにいいのかも? overflow: auto で親の高さが復活する理由として知恵袋に乗っていました。

ボックスの高さは、中身から計算されます。 ところが、浮動化したボックスは、親ボックスの中身とは見なされません。だからその分、親ボックスがつぶれたようになります。 しかしながら、親ボックスの overflow が visible 以外の値であれば、その中にある浮動化ボックスも高さ計算に加える、というルールになっています(これは CSS 2.1 からのルールです)。親ボックスがスクロール領域を持つときに、中にある浮動化ボックスを無視してしまうと、かえって不自然になるからです。その結果、親ボックスは中身に浮動化ボックスがあってもつぶれません。

なぜoverflow:hiddenでfloatのレイアウト崩れが解消できるんですか? やりかたは分…

ブロック要素をはみでる文字をoverflowで省略する。 overflowよりも、

white-space: nowrap;
text-overflow: ellipsis;

の2つがみそです。

width: 450px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

タイル指定のポイント
・表示領域を指定(width: 450px;)
・改行禁止(white-space: nowrap;)
・表示領域外非表示(overflow: hidden;)
・末尾「…」表示(text-overflow: ellipsis;)
・WebKit対応(-webkit-text-overflow: ellipsis;)
・Opera対応(-o-text-overflow: ellipsis;)

●省略符号「…」を表示しないとき
text-overflow: clip;

文字数制限をしないでCSSだけで「…」を表示する