2015年9月28日月曜日

スマートフォン表示で、はみ出したtableを横スクロールさせるためのCSS

http://webcommu.net/phone-table-scroll/

.scroll{
overflow: auto;    /*tableをスクロールさせる*/
white-space: nowrap;  /*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{  /*tableにスクロールバーを追加*/
height: 5px;
}
.scroll::-webkit-scrollbar-track{  /*tableにスクロールバーを追加*/
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {  /*tableにスクロールバーを追加*/
background: #BCBCBC;
}
http://webcommu.net/phone-table-scroll/

2015年9月21日月曜日

jQueryで画面の中央に要素を表示する方法 at HouseTect, JavaScriptな情報をあなたに

http://hisasann.com/housetect/2008/07/jquery_2.html

  1. $(function(){  
  2.     var left = Math.floor(($(window).width() - $("#hoge").width()) / 2);  
  3.     var top  = Math.floor(($(window).height() - $("#hoge").height()) / 2);  
  4.     $("#hoge")  
  5.         .css({  
  6.             "top": top,  
  7.             "left": left,  
  8.             "opacity": 0  
  9.          })  
  10.         .animate({opacity: "1"},{queue: true, duration: 4000, easing: "linear", complete: function(){}});  
  11. });  

動画プレーヤーをレスポンシブにする簡単スニペット【Vimeo/Youtube】

動画プレーヤーをレスポンシブにする簡単スニペット【Vimeo/Youtube】 : フタパパ
http://www.pondad.com/?p=8144

<style scoped>  .video-player{  	position: relative;  	padding-bottom: 56.25%;  	padding-top: 30px;  	height: 0;  	max-width: 100%;  	height: auto;   }  .video-player iframe,  .video-player object,  .video-player embed{  	position: absolute;  	top: 0;  	left: 0;  	width: 100%;  	height: 100%;  }  </style>  <div class="video-player">  <iframe src="//player.vimeo.com/video/72216778?badge=0&amp;color=f0e400" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

iframe内の高さと幅を絶対値absoluteでします。これで実際のプレーヤーの縦横比が維持されます。

そしてiframeの親要素に対してクラスvideo-playerを指定し、これは相対値relativeで16:9の画面にするという方法です。

2015年9月12日土曜日

Buffalo LinkStation ハードディスク交換方法

内蔵ハードディスクを交換する方法(LS-WVL/R1,LS-WVL/RF,LS-WXL/R1) - アンサー詳細 | BUFFALO バッファロー
http://faq.buffalo.jp/app/answers/detail/a_id/12651

バッファローのNASの修復を指定外のHDDで行う | 夢の地図
http://www.yume-map.net/?p=3567