display
- block (p、div、ul、h1〜h) 横いっぱいに広がり、縦に並ぶ
- inline ( a、span、omg) 要素が横に並んでいく
- inline-block
- none 非表示
blockは改行が入り、幅と高さが設定される。 左右、上下の余白が設定できる。 inlineは改行は入らず幅と高さが設定できない 左右の余白が設定できる。親に対しtext-alignが設定できる。(vertical-alignも) inline-blockは改行が入らず、幅と高さが設定できる 上下左右の余白が設定できる。親に対しtext-alignが設定できる(vertical-alignも)
- 参考
セレクタ
以下が詳しい。
weboook.blog22.fc2.com
Slickの導入
htmlから読み込む
<script type="text/javascript" src="/js/slick/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="/js/slick/slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/js/slick/slick/slick-theme.css" media="screen" />
- 表示用のボタンを貼り付ける
<ul class="slick-box"> <li class="slick-item"> <button data-id="menu1"> <img src="./resource/1.png" width="250px" height="250px" alt=""/> <p>1</p> </button> </li> <li class="slick-item"> <button data-id="menu2"> <img src="./resource/2.png" width="250px" height="250px" alt=""/> <p>2</p> </button> </li> <li class="slick-item"> <button data-id="menu3"> <img src="./resource/3.png" width="250px" height="250px" alt=""/> <p>3</p> </button> </li> <li class="slick-item"> <button data-id="menu4"> <img src="./resource/04.png" width="250px" height="250px" alt=""/> <p>4</p> </button> </li> </ul>
- 表示用する
<script type="text/javascript"> /// スライダー表示 $(function() { $('.slick-box').slick({ accessibility: true, adaptiveHeight: true, autoplay: false, dots: true, arrows: true, speed: 300, fade: false, infinite: true, slidesToShow: 1, slidesToScroll: 1, centerMode: true, centerPadding: "60px", mobileFirst: true, focusOnSelect:false, focusOnChange:false, draggable: true, touchMove: true, swipe: true, swipeToSlide: true, verticalSwiping: false, vertical: false }); }); </script>
現在形
typescript環境的な一覧
typescript start script · GitHub
DOM関連2
DOM Standard
詳細はこれを読むことになる。
既存メソッドの拡張
declare interface String { getCount(): number; } (String.prototype as any).getCount = function () { return this.length; };
でimportする。
iframeとタイマー
タイマーでiframeを切り替えてみた。
function getID(identifier:string):string { return '[data-id="' + identifier +'"]' } const x:JQuery<HTMLIFrameElement> = $(getID("child")) as JQuery<HTMLIFrameElement> const y = x.get(0); setTimeout(function(){ y.src ="./hoge.html"; },2000) y.src = "./hogehoge.html";