utamaro’s blog

誰かの役に立つ情報を発信するブログ

css

Bootstrap5を使ったレビュー一覧画面を作りました。

概要 2019年に作成したプログラムを改修し、bootstrap5を利用したレビューの一覧画面を作成しました。 テンプレートはWordPress用ではなく、自ら開発する方向けとなっています。 例えば、現在作成しているサービスのレビューサイトへ追加するといったことが…

material-iconsをchrome拡張のcontent-scriptで使用する方法

環境を整える 開発環境を整えます。 今回使うライブラリは以下のものを使います。 "dependencies": { "css-loader": "^2.1.1", "file-loader": "^3.0.1", "jquery": "^3.4.1", "material-icons": "^0.3.1", "webpack": "^4.32.2", "sass-loader": "^7.1.0", …

左側に表示するナビゲーションメニューについて調べたときに参考にしたサイト

ナビゲーションのメニューがまとまっているサイトです。 http://photoshopvip.net/97481 こういったサイトはよく見ます。とても助かりますね。 この中で使えそうだなと思ったものを紹介したいと思います。 まずはこれです。 https://codepen.io/MrsColombo/p…

Djangoでページングを表示するための関数

Djangoでページング処理を作成する際に作った関数を紹介します。 コードの紹介になるので、紹介はコードにコメントにて行います。 前後のページを表示するための関数 # self.limit: データ表示数 def page_data(self, count, page): # count: データ数 # pag…

はみ出す文字列を三点リーダーにする方法

領域をはみ出したときに三点リーダー(…)にする方法を紹介します。 既出かと思いますが、詳しい内容とかあまり見つからない(こうやればできるというのは見つかる)ので、私なりに調べた内容を載せます。 領域をはみ出したときに三点リーダー(…)にする場合は…

bulmaのpanelのヘッダーにボタンを付ける

bulmaというcssフレームワークでpanelというものがあります。 このpanelではpanel-headingというのがあるのですが、このヘッダーに編集ボタンは用意されていません。 この記事ではbulmaのpanelのヘッダーに編集ボタンを付ける方法を紹介します。 panelについ…

Djangoでcssファイルから画像ファイルを読み込む方法

Djangoでcssファイルから画像ファイルをurlで指定する方法について紹介します。 やることは簡単です。 Djangoの設定ファイルで以下のような設定をしていると思います。 STATIC_URL = '/static/' STATIC_ROOT = 'staticfiles' この設定をしている場合、static…

javascriptでカレンダーを作成する

html、css、javascriptを使ってカレンダーを作成します。 この記事では、htmlとcssの部分についてはcodepenで見つけたデザインを使用しています。 なので、javascriptをメインで紹介したいと思います。 参考にしたデザインはこちらです。 https://codepen.io…

frappe-ganttを使ってガントチャートを作成する方法

ガントチャートを作成するライブラリは多くありますが、今回紹介するのはfrappe-ganttというライブラリです。 github.com ↓のようなチャートを作成できます。 残念ながら、マウス操作でタスクを追加することはできません。自分で実装することはできそうなの…

可変グリッドレイアウトをMuuriで実装する

画面サイズを変えると、中のグリッドがグリグリと動く画面を作ってみます。 github.com npmでインストールします。 npm install muuri 注意事項 ドラッグして要素を動かす場合は以下のライブラリをインストールする必要があります。 npm install hammerjs np…