LightboxはjQueryを利用したJavaScriptライブラリ。 最近は見かける機会が減ってきましたが、写真を押すと写真が拡大表示されて 黒背景に写真が等倍で表示される「写真の見栄えをよくできる」ライブラリです。 サムネイルを押すと、大きい画像が等倍にリサイズされながらフェード処理されて表示されるので 動きがあり非常に見栄えが良いのがポイント高いです。 JavaScriptの専門知識がまったくなくても簡単に導入ができるのでよく利用されています。 ライセンスは The MIT Licenseで商用・ ... IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「display: flex;」が抜けているとflexboxレイアウトができない という初歩ミスにハマってしまい ... Naverまとめで「サービス利用に制限がかかっているため、ログインできません。」が表示される. 使い道はスマホの方が多そうですけど、項目を細分化しろよってなると思うので使い道があるかどうかわかりませんw, See the Pen NWrqzXp by むぅ (@mugenweb) on CodePen.dark, jsでul.open_parentに子の開閉要素を追加しています。 要素があるか判別、処理を振り分ける方法【.length】 ですが、取得できる値が微妙に異なるので、以下でまとめておきます。, 他にも、ネイティブのJavaScriptでサンプルデモを作っているので、よろしければご覧ください♪, 28歳で異業界からフロントエンドエンジニアに転職した女子が、隙間時間にゆるっと更新するブログ。制作会社勤務。, paddingで高さが出てしまうため、heightを0にしたところで、アコーディオンの中身を完全に隠すことができなくなってしまう, 【簡単】ネイティブのJavaScriptでlazy loading(レイジーロード)させよう!webサイトを高速表示!. また、:firstの部分を:nth-child(3n)とすることで空けておく場所を決めることもできます。, See the Pen gOrGEdE by むぅ (@mugenweb) on CodePen.dark, liの項目が長い場合、閉じるのにいちいち上のボタン部分まで戻って閉じるのが面倒な時に使える?サンプルです。 See the Pen vue-accordion - step3 by 35n139e (@35n139e) on CodePen. 今回はそのサンプルを紹介します。, jQueryをページに読み込むときには公式サイトjQueryよりファイルをダウンロードし自身のサーバーへアップロード See the Pen 楽天GOLDで使える!送料などの金額を一括管理をjsでやるためのまとめメモ。 今回はデモのためにあえてbtn-とopen-のクラスがjQuery用、 on CodePen. アコーディオンメニューはよく使用するメニューだと思います。アコーディオンメニューが開いたときと閉じたときにそれぞれのテキストを変更させる実装方法です。スマートフォンで使用するのが多いか … 外部サーバーから読み込むため、外部サーバーがダウンしたら使えなくなる。またネットワークで遮断していると使えない, CDNの方が楽ですが、ページの速度を優先したり、限定したネットワーク環境の場合には Accordion-Vanilla.js by KL (@KLife) メディアクエリ(Media Queries)が効かないときに確認したいこと メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため(イレギュ ... スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれと言われる ... WEBブラウザはリンク要素の上にマウスカーソルを乗せると 矢印から指マークへ切り替わります。 マウスカーソル リンクカーソル CSSを編集しているときに何度やっても指マークが表示されなくなる不具合が起こることがあります。 その時の解決方法を記載します。 CSSでレイアウトしたときにリンクの指マークが表示されない原因はZ-index よくよく考えれば当たり前なのですが、他のことでいっぱいいっぱいになっていると忘れがちな内容です。 リンクタグを付けているのに指マークが表示されない要素に 『positionのプ ... お金をどうやって稼いでいいかわからない! 定職の仕事での収入が少ないので、普段の仕事以外でお金を稼ぐことはできないか? 現代のサラリーマンの悩みですよね。 なぜならアベノミクス効果で給料があがってはいますが、(本当?) 税金・保険料も上がっているので、お財布から出ていくお金の量が増えているからです。 収入がいくら増えても、支出が増えたらお金はたまりませんよね。 税金・保険料以外にもインフラ系の生活 ... 家計負担を考えて副業を考えている主婦の方が多いです。 今は旦那の稼ぎでまかなえていても、将来的に子供が欲しいと考えると 資金面での不安はあります。 子供が小さい時期ですと手間がかりますので、何かと目が離せない状況になります。 通い仕事になってしまうと保育園に預けなければいけなかったりと大変ですので、 近頃は「在宅ワーク」が段々と人気になっててきています。 「在宅ワーク」が人気になってきている背景に ... 副業=大変ではない 副業をはじめるとなると、時間をつくらないといけないし、 新しいことをおぼえなければいけなかったりと何かと大変ですよね。 やりたいことが副業にできれば長く続けられますが、 やりたくないことを無理矢理続けていてもしんどくて辛い人生になってしまいます。 特別なスキルが必要なく、主婦が簡単にできる綺麗になれる副業があったとしたらどうでしょうか? そんな都合の良い副業があるはずがないでし ... 専業主婦をしているけれど、夫の稼ぎが少なくて将来設計が不安になっている、 夫の少ない稼ぎを支援したい 2018年の高い税金や保険料を見ていると、どんなに夫の給料があがっても 支出が増えるばかりで全然貯金も出来ません。 専業主婦になったけれども、空き時間で家計をサポートしたい。 しかしまとまった時間が取れないなら、短時間で大きく稼げる高収入バイト求人をさがすしかありません。 そこで検討してもらいたい ... ■厳選!Unity,Unreal Engineを使ったゲーム業界の転職におすすめなサイト. アコーディオン、横に開く(一つ開けると他は閉じる) by 125naroom (@125naroom) on CodePen. 'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); アスタミューゼでは現在エンジニア、デザイナーを募集中です。 興味のある方はぜひご応募ください。, 世界中のinnovatorのために、創造活動を可視化し未来を創るためのプラットフォームです。, 「データ」と「人」で、あなたのイノベーション活動を支援します。共同研究・事業推進・自社技術の活用や新規事業に役立つ様々な機能を提供します。, 「成長している市場」と「未来を創る企業」を紹介。企業・特許情報のビッグデータ分析から情報提供し、あなたの知らない未来を発見するメディアです。. jQueryのアコーディオン実装サンプルを作りました。 サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー もくじ アコーディオン、シンプル版 アコーディオン、一つ開けると他は閉じる アコーディオン、一番目は開けておく jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、6種類実装したときのまとめです。 Copyright© さくらいらぼ , 2020 All Rights Reserved. また、親と同じ構造(h3の次に開閉するアコーディオンメニューの要素)とすることで、jsが短く書けるようになっています。, jquery、php、css3、wordpressのカスタマイズなどを綴ったメモブログです。, フォームで名前の入力をしたら自動でフリガナ入力欄にも入力してくれるjquery.autoKana.jsの使い方です。ユーザーが入力する手間が省けるので、ユーザービリティの向上にもつながりますね。, よく使うhtml特殊文字とjqueryでhtml特殊文字をエスケープ/アンエスケープする方法、そしてツールを作ってみたまとめメモ。 それと、文字数制限のバリデーションもつくります。. 「開く要素が消えている状態 = 閉まっている」とし, .css('display') == 'none' を使って サイト制作でよく使うものをまとめました。. 4のサンプルを変更して閉じるボタンを追加し、ボタンクリックで閉じることができます。 on CodePen. アコーディオンの閉じるボタンを複数作る by 125naroom (@125naroom) こんにちわ。 jQueryを使えばアコーディオンを使っていろいろと応用ができるのでおすすめです。, jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。, 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる), 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました), 【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集, 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。, 11月の2階 机がふたつ、脚立がひとつ 大きな家具はまだ置いてない 10年後はどうなって…, よく風邪をひく 2階で過ごす おなかが空いた 窓の中でおやつをする 古いサイトでたまに見かけるaタグ「javascript:void(0);」の意味【WEB制作】 それぞれの要素によって、高さが一律ということはあまりないと思うので、jQueryで高さを指定する方法がいいのかと思います。, See the Pen MWyExry by むぅ (@mugenweb) on CodePen.dark, 上のコードの2~4行目でそれぞれ高さを取得してその高さを指定しているので、内容によって高さが可変になります。 javascript:void(0)はリンクタグを押したときに挙動させないようにするために使っています。 on CodePen. See the Pen 使い方はとっても簡単!料金設定を記載してあるページ全てに(楽天GOLDで作成したものに限る... 楽天での話、楽天のデフォルトTOPページやカテゴリページなどのjsが使えないページからリダイレクトさせる方法のまとめ。(楽天GOLD必須), requiredで入力していないと「このフィールドを入力してください」しか出ないし、ほかの入力がある場合、エラー表示がばらばらになるので、requiredの動きをjQueryでつくります。 それに加えてアコーディオンメニューが開いたときに「btn」内のテキストを「CLOSE」にしたいと思います。, 「.hide();」はスライドされる要素にCSSで「display:none;」をかけることでも併用がききますが、注意点があります。 アコーディオン、シンプル版 by 125naroom (@125naroom) 今年はvue周りの書籍が複数出版されて更にVue.jsの普及が進みそうでうれしいですね。. on CodePen. 表現力を上げるcssアコーディオン15選をまとめてみました。シンプルな使い方から、ちょっとした動きを入れることでクオリティの高いものまで様々なサンプルをピックアップしてみました。 Javascript 古いサイトの修正をするときに見かけることがあるのが 「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、 どんなメリット・デメリットがあるのでしょうか。 「javascript:void(0);」のメリット ・aタグのhrefに書き込むとaタグの画面遷移を無効化 ・カーソルが「指カーソル」の形になるのでボタンの画像が視覚的に”押すも ... Javascript 古いサイトの修正をするときに見かけることがあるのが 「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、 どんなメリット・デメリットがあるのでしょうか。 「javascript:void(0);」のメリット ・aタグのhrefに書き込むとaタグの画面遷移を無効化 ・カーソルが「指カーソル」の形になるのでボタンの画像が視覚的に”押すも ... -JavaScript, Web制作 js on CodePen. バリデーションで使えそうなfunctionも追加しました。. アコーディオンで多階層のメニューを作る by 125naroom (@125naroom) 上記のアコーディオンはあくまでも例なので、使い方によって変更していって下さい。. jQueryライブラリをサーバーへアップロードして使ったほうが無難です。. アイコンは疑似要素で作成しています。, 結構使えるところはあるかと思います。 (勿論jqueryでもこの方法は可能). 設定しないとクリックしても普通のリンクとして機能します。 その際、ボタンにCSS「cursor:pointer;」をかけてあげるとマウスオンでカーソルが変わるので親切です。, 4種類を作りました。 アコーディオンが開閉するときに動作が全くなく、一気に全部開閉するタイプのアコーディオンです。横の「+」マークだけがクルクルと回ります。JSを使わずPure CSSで出来ているのが良いですね。 項目選択タイプのアコーディオンメニューのCSSデザイン例。 ネイティブのJavaScriptで実装するlazy loading(レイジーロード)をご紹介します。制作現場では、よく取り入れられている手法です。簡単なので、さくっとマスターしちゃいましょう。... 【簡単】ネイティブのJavaScriptでアコーディオン(アニメーションあり)のサンプルデモを作ったよ|初心者向け, LIKE:英語 / 洋楽 / Web / 海外旅行 / カメラ / ハイスペックなアイテム. on CodePen. 短い文でかんたんにアコーディオン開閉時を実装できます。, SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。 アコーディオン、横に開く(一番目は開けておく、一つ開けると他は閉じる) by 125naroom (@125naroom) アクセス数がかなり少かった(;;)ので一旦お休みしてフロントエンドっぽい事書いていこうと思います。, vueでやるとAPIやdataリストにタイトルや本文を入れたくなりますが、今回は以下の要望を満たすものを作っていこうと思います。. Follow @astamuseLab !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)? ネイティブのJavaScriptで、ぬるっと開くアニメーション付きのアコーディオンを作りました。, jQueryの場合、slideup / slidedownメソッドがあるので、ささっと実装できるのですが、ネイティブのJavaScriptで書く場合は少し考える必要があります。(特にアニメーション付きの場合), いろんな書き方があると思いますが、私は今のところ、以下で紹介する方法で落ち着きました。. http://lab.astamuse.co.jp/entry/2018/06/06/131745, https://jp.vuejs.org/v2/guide/transitions.html#JavaScript-%E3%83%95%E3%83%83%E3%82%AF, https://www.amazon.co.jp/dp/B07J6FP6NQ/ref=cm_sw_r_tw_dp_U_x_Q1bXBbWXR8E, https://www.amazon.co.jp/dp/4863542569/ref=cm_sw_r_tw_dp_U_x_J2bXBbB86RMJ, gitlab-ci+kaniko+gcloudでCloudRunにアプリケーションをデプ…, BigQueryのINFORMATION_SCHEMA VIEWSを触ってみました. See the Pen See the Pen 0px →開いた状態の高さpxをtransition: height 0.4s ease-in-outでアニメーションさせてあげれば表現出来ます。 See the Pen メニューの実装の際に、割とよく使用すると思います。, ボタンに画像を使用しているとCSSスプライトが使えますが、テキストにしている場合はもちろん使えないので、jQueryを使用して動的に変えちゃいましょう。スマートフォンで使用するのが多いかもしれません。, HTMLは下記です。