HTMLの静的サイトでもマークダウンで記事を書きたい【jQuery/markdown-it.js】
サイトをコーディングしていると、 WordPressを構築するほどじゃないけど記事ページがある 小規模なサイトで会社概要だけマークダウンで作成したい ポートフォリオサイト等で制作物のページだけマークダウンで管理したい という状況が自分自身、結構ありました。 マークダウンからHTML化させるVSCodeの拡張機能とかもありますが、マークダウンの文言含めてGitHubで管理したいなと思い、jQueryとmarkdown-it.jsというのを使ってHTML＋マークダウンで簡易な複数ページのサイトを構築するコードをまとめました。 最低限のサンプルコード まずは、マークダウンで作成できる最低限のコードを紹介します。 js-markdown-editerというクラス内の部分がマークダウンで書くと変換されるようになります。（インデントつけるとコンパイルされないです…😭） <!-- マークダウン記述箇所
FullCalendarをそこそこカスタマイズしてみる。 - Qiita
前書き FullCalendarを結構使ったので、メモメモ。 Fullには使い切ってないけどね。 結構いろいろできるのね。まだまだよくわかんないけど。 やること 表示したいカレンダーの内容は以下。 祝日(日本の)がわかるようにする（なんの日かは表示しなくていい。休みだ！とわかればいい） Google Calendarから予定をひっぱってきて表示する 月カレンダーと、月ごとの予定リストを切り替えて表示できる 大きいスクリーンサイズは月カレンダー、小さいスクリーンサイズは予定リストをデフォルト表示とする 予定リスト表示の場合、予定の場所もリストに表示 予定をタップしたら、Google Calendarにリンク、ではなく、ポップアップ詳細を表示。(この記載からは詳細を割愛) （2020/10/28追記↓） カレンダーの表示期間を設定（どこまでも先のことを表示しない） （2020/11/5 追記↓
jQueryでTABLEをクリックした時の情報を取得したりセルの編集をしたりする
クリックされたセルのカラムや行番号や内容を取得するサンプル。 <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TableClick</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> </head> <body> <script> $(function() { $('#target-table td').on('click', function() { v
jQuery tablesorter 2.0
TIP! Sort multiple columns simultaneously by holding down the Shift key and clicking a second, third or even fourth column header! Getting started To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: <!-- choose a theme file --> <link rel="stylesheet" href="/path/to/theme.default.css"> <!-- load jQuery and tablesorter scr
【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る
【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る 公開日:2019/05/21 /最終更新日:2020/05/07 CSS jQuery・JS PICKUP Technique モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。 また、モーダルウィンドウのメリットやデメリットにも触れつつ、サンプルで確認しながらプラグインなしで作っていきます！ モーダルウィンドウとは? 素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。 モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作
コピペで実装！モーダルウィンドウのサンプル［HTML / CSS / jQuery］ | ma-ya's CREATE / WEB DESIGN
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。 モーダルウィンドウ（ポップアップウィンドウ）の実装はついついプラグインに頼りがちですが、そういったものに頼らずに実装するケースもあります。 その度に一からコーディングするのも少し手間なので自分用も兼ねてプレーンなモーダルウィンドウのサンプルコードを残しておきます。 プレーンなモーダルウィンドウサンプル モーダルにも色々な仕様があるので実際は仕様に合わせたカスタマイズが必要になると思いますが、本当にプレーンなもので良ければ↓のコードそのままでもいいかと。 必要に応じて各指定を要カスタマイズです。 最低限ですが、領域外クリックでモーダルを閉じる機能のみ付けています。 See the Pen pure modal by mycreatesite (@mycreatesite) on CodePen. ↑をカスタマイズしたものが
jQuery&CSSでレスポンシブなハンバーガーメニューを簡単に作成する方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
jQuery&CSSでレスポンシブなハンバーガーメニューを簡単に作成する方法 2022.02.22 2022.04.11 ECサイト構築 ハンバーガーメニューは、今やスマートフォンサイトやタブレットサイトにて広く普及されているメニューの表示形式であり、中にはPCサイトでも設置されている事例さえ見られます。かつては、これがメニューだと認識されないという短所もありましたが、ハンバーガーメニューのデザインが一般的に認知広まったことで、操作方法と、操作することによって期待できる表示結果を多くの人が予想できるようになりました。 スマートフォンのような表示領域が小さいデバイスであっても、コンテンツの表示領域を妨げることなく、特に、カテゴリ数等のメニューが多いサイトに相性が良いハンバーガーメニューについて、レスポンシブ対応で簡単に作成できる方法をまとめました。 ハンバーガーメニューとは？ 赤枠で囲んだと
【まとめ】レスポンシブデザインで使えるメニュー3選＋１｜モバイルラボ
前回は「ハンバーガーメニュー」について紹介させていただきました。 今回はハンバーガーメニューだけではない、レスポンシブデザインでも使えて、変換ツール系でも利用できる、jQueryメニューをいくつかご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに jQueryでサイトに合ったナビゲーションメニューを作ろう レスポンシブデザインで使える簡単メニュー「Naver」 レスポンシブデザインのサイトで今もよく見る形の、画面幅が小さい場合にグローバルメニューを、ハンバーガーボタンのメニューの中に隠すjQueryです。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに サンプルコードはこんな感じになります。 <nav> <a href="#">Home</a> <a href="#">News</a&
HTML5.1で追加された新機能！JS・JQueryに頼らずここまでできる | 株式会社チップディップ
2016年11月1日にW3Cより正式勧告があったHTML5.1。 勧告から３ヶ月以上が経った現在でも、追加された機能のほとんどは主要ブラウザ全てに対応していません。 今後、現場ベースで使えるようになって行くことに期待をこめて、今回はHTML5.1で追加されたものの中から使える機能をピックアップして紹介していきます！ <picture>タグで画像を切り替える 今までJavaScriptやCSSでしか行えなかった画像の切り替えですが、<picture>の記述のみで可能になりました。例として以下の画像を用意してみました。 ウインドウサイズを狭めていき、1000px以下になった時に自動的に画像が切り替わっているのが確認できると思います。そして、これがそのために必要なソースです。 <picture> <source media="(min-width: 1000px;)" srcset="min10
jQuery の基礎 - Qiita
つい先日下記の2つの記事を書きました。 JavaScriptをHTMLファイルにどのように適用するかというものですね。 『JavaScriptをWEBサイト（HTMLファイル）に適用する方法』 https://qiita.com/kibinag0/items/7843727e4328881ae964 『JavaScript と DOM 応用編』 https://qiita.com/kibinag0/items/6e9b9169dcd261bd9ae1 今回その続編のjQuery編です。 DOMで document.querySelector("h1") とかって記載していたんですけど、何とjQueryを使用すると、、、そのコードが $("h1") で済むみたいです。時短かよ。 ちなみに "$ = jQuery" という意味で jQuery("h1")としても大丈夫見たい。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery.tablesorter - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
【jQuery・CSS】jQueryとCSSで作るアコーディオンメニュー