pugを使って配列、オブジェクトをhtmlに出力する方法

リストなど大量の情報をまとめてhtmlファイルに出力する方法について書きます。 エクセルで企業リストに企業名、リンク先などの情報が記載された原稿を渡されたときなど、 エクセルからのコピペでは疲弊してしまうので、pugを使って一気にhtml化してしまおうという話です。 データの用意 まずは、エクセルから以下のような形に成型します。 [ {name:"google",url:"http://www.g […]

三点リーダーについて-CSSやJSを使った実装方法

css

「50文字以上で三点リーダー(・・・)にしたい」 「3行目以降は三点リーダー(・・・)にしたい」 などの要望があったときに、サクッと引っ張ってこれると便利なので、メモ 一行のみならCSSが一番簡単 一行のみで表示させるのであればtext-overflow: ellipsis;が使えるので、簡単 <p>三点リーダーめんどくさい三点リーダーめんどくさい三点リーダーめんどくさい</p& […]

jsを使ったアニメーション-anime.jsについて

jsを使ったアニメーションをanime.jsで実装する方法について書きます。 今回は、スクロールして画面上にアニメーションしたい要素が出現したときにイベントが発生するようにするため、jquery.inviewを利用します。 セッティング 各種ライブラリは以下から落としてきます。 – anime.js – jquery.inview <script src="https […]

文字コードがShift_JISの時の簡易開発環境(VSCode)

文字コードがShift_JISのファイルを編集しないといけないとき、VSCodeだと文字化けてしまい、ローカル簡易サーバーを立てるのも一苦労です。 拡張機能のLive ServerがShift_JISでも使えると非常に楽なのですが、設定箇所が見つからず… そんな場合、取り急ぎ簡易的な環境を作るときに便利なnode-staticのご紹介です。 VSCodeの設定 ファイル→基本設定→設定 […]

gitで差分納品ファイル作成

git

差分の納品ファイルを作ってと言われたときに細々とコピペするとミスも出てきてしまうので、gitを使って差分納品ファイルを作るといいですよって話です。 まず初めに powershellとgit bashではコマンド置換が異なるようで、参考サイトにあるバッククォートを利用したコマンド置換はエラーを吐きます。 powershell で実行する場合は「$()」を使ってコマンド置換を行います。 参考 http […]

1 5