【JavaScript】Swiper.jsを使ってjQuery要らずのスライダー

ウェブサイトではトップ画面などによくスライドショー/スライダーを見かけますよね。

でもHTML/CSSだけではスライダーは実装出来ません。

なるべく簡単に実装できるよう、私もよく利用するSlick.jsやbxSliderなどのプラグインがありますが、jQuery必須だったりします。

jQueryはJavaScriptを拡張したものです。

JavaScariptもままならないのにjQuery？？という方、、、困りますよね。

今回はできる限り素のJSを利用したいという方や、HTML/CSSと学んで次にスライダーをとにかく実装できるようになりたいという方にjQuery不要の「Swiper.js」導入方法を解説したいと思います。

【 HTML/CSS】並んだ要素に均一にボーダーを引く例

Flexを使って横並びにした要素に均一の左右縦ボーダーを引く例です。

横並びメニューなどでよく左右にボーダーがついてる場合、全ての要素に左右ボーダーとしてborder-leftとborder-rightを指定してしまうと、隣合わせの要素のボーダーが二重になって太くなってしまいます。

【HTML/CSS】ハンバーガーメニューPart.1「必要？不要？論」

ハンバーガーメニューって美味しそうな名前ですね。

よくスマホサイトなんかに使われる事の多い、アイコンをタップすると開閉式でニュっと出てくるナビゲーションの事です。

このサイトでは現在スマホで見た時に使っています↓

三本線のアイコンがハンバーグみたいに見えるからそう呼ばれるようになったんだとか。

こういったタップやクリックなどのアクションに合わせてサイトに動きをつけるような部分の多くはJavaScriptが使われています。

このサイトでも部分的にJavaScriptを使用していますが、ベーシックな開閉の機構はHTMLとCSSだけで出来ています。

今回から前回ヘッダーに実装したメニューを、スマホの際に開閉式ハンバーガーメニューにした方法について解説していこうと思います。

Part.0的な前回記事、はてなブログでの横並びメニューの実装方法の記事はこちら↓

webabc.hatenablog.jp

【JavaScript】ウィンドウを閉じる動作はChrome等で動かない

とっさにクライアントから受けた質問であった、ウィンドウを閉じたいけど出来ないからどうすれば良いかというもの。

通常であればJavaScriptで

window.close();

この一行だけで事済みそうなもの。

実は現在この命令はコンソールの内容いわく

「Scripts may close only the windows that were opened by them.」

という英語で一蹴されてしまいます。

訳すと

「スクリプトは、スクリプトによって開かれたウィンドウのみを閉じることができます。」

とのこと。

【HTML/CSS】画像やブロックを中央揃えにしたい！！のに出来ない時に見る記事 Part.2「上下センタリング編」

 以前書いたの中央揃えの記事「左右センタリング編」の続きです。

webabc.hatenablog.jp

今回は「上下・天地センタリング編」

画像の中央に文字を配置したり、ファーストビューで画面の中央にレイアウトしたり、ポップアップウィンドウを浮かび上がらせたり、色々使いどころが多いですよね。

いくつか方法がありますが、一番簡単楽ちんなFlexを活用した方法で解説します。

【はてなブログ】ヘッダーに横並びのメニューを表示させる方法

はてブロ読者増加につき今回は、はてなブログカスタマイズネタです。

ヘッダーにグローバルナビゲーションとも呼ばれるいわゆる横並びのメニューを追加してみたのでその方法について。

HTML/CSSで実装するので一般のサイト制作にも応用できます。そういったサイト制作者の方にも読んでもらえると嬉しいです。

そもそもブログにメニューって必要？

方法を説明する前に少し考察から。

はてなブログでは初期にメニューのような存在はありません。

アメブロとかでもたしかそうですよね。ブログにメニューは不要なんでしょうか。