Written by
watanabe
CSSだけで角丸を表現
CSSだけで疑似的に角丸ボックスを表現する方法をご紹介いたします。 下記の4つパターンをご紹介いたします。 背景色のみで画面いっぱいまで伸びる 背景色のみで要素がある場所まで伸びる 背景色にボーダー付きで画面端まで伸びる 背景色にボーダー付きで要素がある場所まで伸びる まず、1パターン目では7行目の「div.radius_block div」にある「padding: 1px 0...
Written by
watanabe
CSSだけで疑似的に角丸ボックスを表現する方法をご紹介いたします。 下記の4つパターンをご紹介いたします。 背景色のみで画面いっぱいまで伸びる 背景色のみで要素がある場所まで伸びる 背景色にボーダー付きで画面端まで伸びる 背景色にボーダー付きで要素がある場所まで伸びる まず、1パターン目では7行目の「div.radius_block div」にある「padding: 1px 0...
Written by
watanabe
animationとkeyframesで画像を横にオートスライドさせ、ボタンクリックで一時停止と再生を実行する方法をご紹介いたします。 使用している画像は4枚になります。 まず、2行目の「div.slide_area」でスライドエリア全体を中央に表示します。次に11行目の「div.slide_mask」で指定した幅と高さを決めて、現在表示する画像以外のものを非表示にします。 1...
Written by
asano
はじめに 前回までで、イベントハンドラを設定し、コントローラーとビューを切り離しました。 今回は、このコントローラーとビューの部分を中心に見ていきたいと思います。 コントローラーからビューへのアクセス ２つのオブジェクト アクセスの説明の前に、コントローラーオブジェクトとビューオブジェクトの名前を見てみましょう。 Xenophy.controller.Header Xenoph...
Written by
watanabe
checkedセレクタで、画像を使用せずにチェックボックスを表現する方法ご紹介いたします。 ポイントは20行目の「opacity: 0;」と26行目の「input[type="checkbox"]:checked + label」です。 「opacity: 0;」を使用している理由は、「dispay: none;」ではスマートフォンのアンドロイド携帯では表示されてしまいますので...
Written by
saito
はじめに 前回のエントリにてコントローラ・ビューを作成しViewportが表示されました。今回はそのViewportにBorderレイアウトを指定し、下記の流れにてコントローラーにイベントハンドラを設定していきましょう。 各ビューの設置 Viewportへ各ビューを定義 各コントローラーを設置 コントローラーの使用宣言 各ビューの設置 ExtJS4 MVCにおけるビューは、Ex...
