2013-09-17

検索フォーム結果画面で文字化けする時に…

検索フォームがある画面と検索結果画面の文字コードが違うと文字化けすることが有るかと思います。
そんな時には、javascriptを活用するといい感じになるそうです。

【参考】 http://blog.alan-trigger.info/?p=22

上記サイトでも記載されていますが、 IEではブラウザの戻るボタンを押したときに検索フォームがある画面のほうで文字化けしてしまう事があるようですので、フォームがある画面の方で「文字コードを変更」⇒「リロード」という処理をするようにしてあげないといけないそうです。
IE怖いね～。。

2013-09-17

cssで表示文字数制限「…」する

よくつかうのでメモ。

  white-space:nowrap;
  width:100%;/*旧ie対策*/   
  overflow:hidden;              
  text-overflow:ellipsis;
  -ms-text-overflow:ellipsis;/*旧ie対策*/

【参考】

text-overflow - CSS | MDN

  word-break:break-all;

この指定があるとIEで上手く表示されないようなので、 IEで「overflow:ellipsis;」が効かないときは、

  word-wrap:normal;

にしたったりましょう。

2013-09-12

■

CSS

CSSだけでできるシンプルなボタン2種類
適当に色変えて利用すべし。

.simpleBtn1 {
  display: inline-block;
  padding: 8px 10px;
  border: solid 1px #06F;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  background: -webkit-gradient(linear, left top, left bottom, from(#69F), to(#36F));
  -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset, 0px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset, 0px 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
}

.simpleBtn2 {
  display: inline-block;
  padding: 4px 10px;
  margin-right:3px;
  background: -moz-linear-gradient(top,#f0f0f0 0%,#b8b8b8);
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),to(#b8b8b8));
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #cccccc;
  font-size: 1em;
  color: #333333;
}