Django HTMLのテンプレート上で型式を文字列にする - Qiita
<tbody> {% for staff in user_list %} <tr align="center"> <th class="staff_name" staff_id="{{ staff.staff_id }}" width="200" >{{ staff.last_name }} {{ staff.first_name }}</th> <!--staff_id要素はjsで使う--> {% for item in object_list %} {% if item.user|stringformat:"s" == staff.username|stringformat:"s" %} ###ここで文字列に変換 <td class="day_{{ item.date }}" id="s{{ staff.id }}d{{ item.date }}"> {{ item.shift_nam
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Django templates.html を使ってみる - Qiita
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin=
Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話 - SMARTCAMP Engineer Blog
こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtemplateタグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルールを紹介します。 背景 eslint-plugin-vue が効かない チームに Pug 推進派がいない Pug を HTML に移行するには Vue 3 に準拠した Lint ルールを導入する Lint を実行してみる 対応した目ぼしいルール vue-require-v-for-key vue/val
全てオープンソースで公開されている、Web制作に使えるシンプルなツール集・「Omatsuri」 - かちびと.net
OmatsuriはWeb制作に使えるシンプルなツールのコレクションです。基本的にフロントエンド開発向けがメインだそうです。1つ1つはシンプルなツールですが、全てがPWA対応且つオープンソースとしてソースコードも公開されています。 名前は日本語の「お祭り」から取ったそうです。用意されているツールはCSSで三角を作るジェネレーター、カラーパレット生成ツール、ページを区切る用の湾曲したSVG画像を作れるツール、SVG圧縮ツール、SVG→JSXのコンバーター、Base64へのエンコーダー、住所や名前など人物用のダミーデータジェネレーター等々、現在は11種のツーﾙが用意されています。 全てのツールはプライバシーを尊重し、追跡コードや広告などは付けられていないそうですが、基本的にOSSはソースコードを調べてから利用する事も開発者の方は推奨しています。ライセンスはMITとの事です。 Omatsuri
HTMLやCSSやJavaScriptなどのコードをかっこよく魅せるために使用できる無料ツールのまとめ
HTMLやCSSやJavaScriptなどのコードをかっこよく魅力的に見せるために使用できるツールを紹介します。 プレゼンなどでコードを人に見せる時をはじめ、TwitterやFacebookやInstagram用にコードの画像を最適化して見せることもできます。 6 Awesome Ways To Present Your Code 🔥 by Niharika Singh ⛓ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Carbon Codeimg.io Pastie Rust Playground Silicon Polacode はじめに Web制作者はいつか、コードを発表する時がくるかもしれません。プレゼン、ツイート、ブログ、あるいはスニペットを人に見せる時です。 あなたのコードを素敵に見せるために使用できる
Web制作業界に就職するあなたへの手引き（その１）Web制作の仕事はなくなるのか？｜菱川拓郎
Web制作の仕事を始めたいという人は、世の中にたくさんいるようです。 「 #駆け出しエンジニアと繋がりたい 」などのハッシュタグを見ても、Web以外の技術を勉強している人に比べて、やはりHTMLやCSSを勉強している割合が高い気がします。その次も Rails か Laravel を触ってWebサービスっぽいものを作ってみたり、という感じでしょうか。 Webの技術は、やはり人工知能とかAIとかに比べると、確かにかんた…じゃない、敷居が低そうに思いますもんね。 一方、最近、私がTwitterでフォローしている人たちが、価格破壊について話題にしているのを目にしました。 コーディングできる人見つけるのはすごい難しいのに、2000円でやる人はたくさんいる…なぜ… https://t.co/hH0AyA5bRi — 菱川拓郎@コンクリートファイブジャパン (@HissyNC) August 5, 20
Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ
この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめ コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」 - かちびと.net
this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思いますが、僕の説明が下手で語彙も乏しいためです、すみません。 例えばdisplay:noneとhiddenはどう違うのか、style="width:***"とwidth="***"はどう違うのか等、結果として同じように見えるけど実際は何が違うのかを解説する、といったものになります。 フロントエンドのスペシャリストは復習に、学び中の方は勉強の一環として如何でしょうか。尚、書いてあることの全てが正しいかどうか確認してないので誤った事が書かれていたらごめんなさい。 this vs that
商品リッチリザルトの構造化データをカテゴリページにマークアップしてはいけない、Googleがガイドラインをより明確に
[レベル: 中級] 商品リッチリザルトの構造化データは、単一の商品ページだけにマークアップし、複数の商品を並べた一覧ページやカテゴリページにはマークアップしないようにすることを Google はガイドラインで今までよりも明確化しました。 商品の構造化データは単一ページだけ 商品リッチリザルトの構造化データは、個別の商品を掲載する単一ページにのみマークアップできることは以前からガイドラインに書かれていました。 今回の更新では、このルールがもっとはっきりと表現するようになりました。 具体的には、次の説明を Google は追加しました（※この記事の公開時点では英語ページが更新、日本語ページは未更新）。 Currently, product rich results only support pages that focus on a single product. We recommend f
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
構造化データで複数アイテムをマークアップする際のガイドラインをGoogleが更新。ネストするか@idで関連付けする
[レベル: 上級] 1 つのページで、複数のアイテム（タイプ）を構造化データでマークアップする際の注釈を構造化データのガイドラインに Google は追加しました。 関連するエンティティのタイプはネストするかもしくは @id で関連付けます。 一方で、独立したエンティティは個別にマークアップできます。 複数タイプをネスト たとえば、解説動画付きのレシピの構造化データは次のようにマークアップできます。 <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "バナナブレッドのレシピ", "description": "とっても美味しいバナナブレッドのレシピ", "image": "http://example.com/banana-bread.jpg
LaTeX.css - HTMLをLaTeX風に表示するCSS MOONGIFT
LaTeXで文書を書いていて、HTMLに変換して欲しいというニーズはよくあります。そうしたHTMLはどことなくLaTeXっぽく感じられるでしょう。論文やレポートとしてはよくても、読み物としては読みづらい雰囲気があります。 LaTeX.cssはその逆です。HTMLをLaTeXっぽく見せてくれるCSSになります。 LaTeX.cssの使い方 何となくこのフォントもLaTeXっぽい。概要を表示しています。 タイポグラフィや数式。この辺りの表示はLaTeXっぽく感じます。 ハイライトなども使えます。 引用。 定義リスト。これをサポートしていないCSSは多いのでちょっと嬉しい。 テーブル。 画像。引用もちゃんと入っています。 注釈。この辺りの表示もレポート風で好きです。 LaTeX.cssはあらかじ指定されているクラスもありますが、殆ど素のHTMLを使って作られています。HTMLは単純に記述しつつ、
HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
html2canvasを試す - Qiita
HTML の Element を画像に変換するライブラリ html2canvas を試しました。Chrome では良好ですが、Firefox では文字のサイズが変わってレイアウトが崩れるようです。 See the Pen Test: html2canvas by 七誌 (@7shi) on CodePen. ↑ 左が撮影元の Element、右がそれを画像化したものです。内容はデザインでよく使われる lorem ipsum と呼ばれるダミーテキストで、意味はありません。 シリーズの記事です。 dom-to-imageを試す html2canvasを試す ← 今回の記事 複数の画像を生成してローカルに保存 公式: http://html2canvas.hertzen.com/ 驚異的な力技で実装されているようです。 動的コンテンツを画像化できるJSライブラリ "html2canvas" を使
そろそろHTML6とCSS4の話を。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの代表のゴウです。 LIGでは毎年アドベントカレンダーなるものをやっていまして。 「今年はゴウさんもなんか書いてくださいよー」 とエンジニアのまさくにに言われたので、よっしゃ、待ってましたとばかりに書いております。 アドベントカレンダーはもともとエンジニア界隈の風習らしいので、テーマもそういったテクノロジー系が喜ばれるみたいですね。テクノロジーかー。俺が書けるテクノロジーの記事なんてあんまないので、ここはあいつに聞いてみましょう。 というわけで、LIGのCTOであるづやを呼び出しました。 こいつだったら最近のWeb業界の流れとかテクノロジーとか知ってるでしょう。 ぜんぜん関係ないですけど、づやの実家はこちらです。電気屋をやっていて、彼は長男なのでいずれ継がないといけないのですが、どうするんでしょうか。我が地元、長野県信濃町も過疎高齢化が進み、他の地域と同じで後継者問題は重
Web制作者におすすめ！VS Codeと同じエディタを使用した最強のコードスニペットマネージャーが登場 -massCode
使い勝手がよく、高速動作のオープンソースのコードスニペットマネージャーを紹介します。VS Codeと同じMonacoがエディタに使用されており、非常に快適です。 macOS, Windwos, Linux対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。 massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 10.13+, Windows 7, 8, 10, Ubuntuをサポートしています。 コード管理 massCodeは、マルチレベルのフォルダとタグ
HTMLだけで実現、5つ星オープンデータ! 新型コロナウイルス対策ダッシュボード語彙で埼玉県データを5つ星化する手順を紹介
世界のデータは、まだバラバラ。5つ星オープンデータによってつながる未来、創りましょう！ 対策ダッシュボード、和歌山県、奈良県、埼玉県の速報連携を実施し、連携先都道府県は18になりました。 これで18/47、38%が連携できたことになります。（連携条件、オープンデータとして新型コロナウイルス対策を公開していて、退院数・死亡数がデータから分かること） この条件の都道府県の連携は完了。オープンデータと明記はなくても、政府・行政の公開は、オープンバイデフォルト。次は、オープンデータとみなし、連携拡大を図ります。 「COVID-19 Vocabulary 新型コロナウイルス対策ボキャブラリー」 HTMLによるオープンデータは、5つ星オープンデータにおいて、星いくつか？実は、1つ星にも5つ星にもなりえます。 肝心なデータが画像であれば1つ星ですし、きちんと他とつながる語彙（ボキャブラリー）が設定されて
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」 - かちびと.net
Alpine.jsはHTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワークです vue.jsやreact.jsといったフレームワークのリアクティブ且つ宣言的な性質を低コストで提供してくれる、というもの 開発者はTailwind.cssのJS版のようなもの、と説明しています Alpine.jsでは13のディレクティブと、5のマジックプロパティと呼ばれるものを使う事が出来ます。Vue.jsとほぼ同じ機能を使える、という認識で良いと思います <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script> ↑ まずはスクリプトを読みこみます 試しに何か作ってみましょう <div x-data="{selected:nul
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. テキストエフェクト系 2. イメージスライダー系 3. ナビゲーションメニュー系ト 4. ローディングアニメーション系 5. ページレイアウト系 6. ボタンエフェクト系 7. 便利、面白系スニペット 「Run Pen」をクリックすることで読み込みが開始され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
