【LPIC】Level1で出てくるコマンドと用語の一覧
【LPIC】setコマンドを使用してシェルオプションを設定する
【LPIC】シェル変数と環境変数の違い【setコマンドとenvコマンド】
【Django】GitとSSHを使ってUbuntuへデプロイする(virtualenvでPythonライブラリの管理)【hookでmigrateコマンドも】
jQueryのslick.jsでカルーセルを表示する【.slick-dotsのCSS付きでボタンを押しやすく】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: jQuery JavaScript ウェブデザイン
jQueryとslick.jsを使うことでカルーセルを簡単に表現することができる。 CDNを読み込み 前もって、以下のCSSと <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> JSを読み込んでおく。(jQueryもセットで。) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 使い方 このような形のHTMLに対して <div class="slick_area"> <div class="slick_content">コンテンツ1</div> <div class="slick_content& ...Next.jsのインストール方法とプロジェクトの作成
- 作成日時:
- 最終更新日時:
- Categories: サーバーサイド
- Tags: Next.js JavaScript
本記事ではUbuntu22.04にインストールする。 インストール パッケージの更新 sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove build-essentialのインストール sudo apt install build-essential nodeのインストール curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash – sudo apt install nodejs 参照元: Ubuntu18.04にnode.jsとnpm、vue-cliをインストールする プロジェクト作成 プロジェクトの作成 npx create-next-app next-project プロジェクトのディレクトリに移動 cd next-project サーバーを起動する。 npm run dev 結論 n ...JavaScriptのイベントリスナのアロー関数でthisは使わない【event.currentTargetを使おう】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript jQuery アンチパターン tips
モダンなJavaScriptに慣れるため、無名関数を書くときにもアロー関数を使い、そしてthisを使おうとすると、意図したとおりにはならない。 アロー関数式とfunction関数ではthisの仕様が異なるからだ。下記ソースコードを元に動作を確かめよう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class="button" value="1">ボタン1</button> <button class="button" value=" ...【jQuery】.animate()の使い方【アニメーション】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: jQuery JavaScript アニメーション ウェブデザイン
.animate() の構文 $(要素).animate({ 発動するCSS }, 遅延 ); 遅延はミリ秒単位で書く <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .button-more{ display:inline-block; background:orange; padding:1rem; cursor:pointer; } </style> </head> <body> <span class="button-more">continue ...</span> <script> $('.button-more').on('mouseover', function() { console.log("over"); // このthisはこのイベントが発生した要素自身を意味している。 $(this).animate({ opacity: 0.5, marginLeft: 20, }, 100); }); $('.button-more').on('mouseout', function() { console.log("out"); $(this).animate({ opacity: 1.0, marginLeft: 0, }, 100); }); </script> </body> </html> 結論 jQueryを使用することで、簡単にアニメーションを再現することができる。 イベントと組み合わせることで、モーダルダイアログの表示や、入力欄の ...react-router-domの使い方【Reactでルーティング】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: react JavaScript 追記予定
ページが複数あるサイトをReactで作る場合、react-router-domでルーティングを行うと良いだろう。 npm install react-router-dom 使い方 コンポーネントを作る src/components/に以下ファイルを配置。 Home.jsx Portfolio.jsx Profile.jsx Home.jsx import { Link } from "react-router-dom"; export const Home = () => { return ( <> <div>ここはホームです</div> <Link to={`/portfolio`}>ポートフォリオ</Link> <Link to={`/pr ...