inazuma2073のブックマーク - はてなブックマーク

CSS だけでスライドショー | q-Az
jQuery、JavaScript を使ってスライドショーを作るのが昔は一般的でしたが今なら CSS だけでも十分スライドショーに見える仕組みを作ることが出来ます。この記事ではシンプルにフェイドイン・フェイドアウトで画像が切り替わるスライドショー作ってみます。下の方にデモも作りましたので参考にしてみてください。作り方制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。 HTML<div class="photo-show"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <im
inazuma2073 2017/04/21
css
リンク
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
inazuma2073 2017/03/06
css
リンク
checkboxを使ってCSSだけでハンバーガーメニュー | q-Az
CSS だけでハンバーガーメニューを設置するという記事を以前書いたのですが、iPhone など CSS のセレクタで hover が効かないデバイスではメニューが開きませんでした。今回の記事はそれを解消すべく input 要素の checkbox を使う事で、hover ではなく click に反応するようにして iPhone でも CSS だけでメニューが開くようにしてみます。当然、iPhone 以外の PC ブラウザ、アンドロイドでも問題なく開閉します。 checkbox って？checkbox とは input 要素で選ぶことが出来る種類の1つで、下のデモのようにクリックすることで〆マークがついたり消えたりする要素です。アンケートやフォームなどでよく使われれています。 input 要素に共通して言えることですが、label 要素というのを個々に設定することが出来ます。labe
inazuma2073 2016/06/17
css
リンク
1