Pythonで久しぶりにHTMLを出力したくなったのでテンプレートについて調べる - Qiita
はじめに ひさしぶりにPythonで久しぶりにHTMLを出力したくなったのでテンプレートについて調べます。 環境： Python 3.7.4 標準ライブラリでの文字列の書式の扱い まず標準で使える範囲で文字列の書式をどう扱えるか調べます。 これについては下記の素晴らしいまとめが存在します。 Python String Formatting Best Practices https://realpython.com/python-string-formatting/ ここで紹介されている方法は以下の通りです。 古い形式の文字列の書式 新しい形式の文字列の書式 PEP498で定義された書式設定方法 テンプレート文字列 古い形式の文字列の書式 昔ながらの文字列の書式の指定方法です。 name = 'アンジュ' age = 18 print('古いやり方----------------------
Spectrum - The No Hassle jQuery Colorpicker
<input type='color' value='#f594d0' /> Why A Colorpicker? I wasn't satisfied with the solutions available for colorpicking. Many of them included a ton of images, were hard to skin or customize, or were very large plugins. Here are the goals I had when making a new one: Small Footprint Just include the needed CSS and JavaScript files, and you are ready to go! <script src='spectrum.js'></script> <l
「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ フラップイズム
※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。 どうも、くーへいです。 今日はある方からリクエストされた記事を書こうかと思います。 皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか？ 実際には案件ごとに使い分けているかもしれませんね。 この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。 例えば、「<html>・・・</html>」は要素ですが、「<html>」や「
「HTMLのタグは一部省略可能」表示速度はどちらが早いのか調べてみた
こんにちは。 Web Designing 様主催の「Tap App Awards 2013」というコンテストに出すアプリの開発が終わりました。 jQueryMobile を初めて使ってみたので、色々と記事のネタが溜まっております。 アプリの方も一般公開用に微調整して、近々リリース予定です。 それはさておき、本題です。 HTML の閉じタグは省略できるという噂を聞いたので、調べてみました。 HTML にはタグや閉じタグを省略できるタグがある 終了タグのみ省略できるタグ（次のタグの開始と共に自動的に終了タグがはさまれるので） li, dt, dd, p, tr, td, th，rt, rp, optgroup, option, thread, tfoot 開始タグ終了タグ共に省略してよいタグ（タグが無ければデフォルト値が使われる） html, head, body, tbody, colgro
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
HTMLファイルのエンコードを『内容から判別する』にしない方法 - [Eclipse/開発環境 ツール類] ぺんたん info
EclipseでHTMLファイルやJSPファイルを開くと、文字化けしてしまうことがあります。 プロジェクト全体で文字コードを指定しても、この種類のファイルのみ指定が効きません。 プロジェクトごとに変更するには、プロジェクトのプロパティよりエンコードを設定します。 ファイル個別にエンコードを指定するには、ファイルのプロパティから『テキスト・ファイルのエンコード』で文字コードを変更します。 ただファイル数が多いときにいちいち指定しなおすのは面倒です。 一般には[設定]→[一般]→[コンテンツ・タイプ]の[テキスト]→[HTML]のデフォルトエンコードをUTF-8にするということで解決します。 これでも解決しないとき、つまり『テキスト・ファイルのエンコード』の標準が「デフォルト（内容から判別する）」になっているときは、HTMLファイルをPHPファイルに関連付けると解消されます。 [設定]→[一般
divにhoverを設定する方法 | JavaScript capsule
divのエリアをマウスが反応するエリアに指定して欲しいといわれた場合 画像や文字を含むエリアの中にマウスが入った時に背景に色をつけてほしい。と言う要望を頂く事が数多くありますが、 <a></a>の中に画像やテキストなど全ての要素をいれるだけでは対応できません。最新のブラウザでは可能な部分ではありますが。。 今回は簡単に実装をしてみましょう。 まずhoverに関しては、jQueryに関数で用意されているものを用いると簡単です。 $(".target").hover(function(){ //マウスオーバーの関数 },function(){ //マウスアウトの関数 }) この時にテキストの色を変更したい。という事をひっくるめて、クラスを追加で設定します。 $(".target").hover(function(){ $(this).addClass("hover") },function()
さくらのVPSでユーザディレクトリにhttpアクセス出来るようにする方法 » とりあえず9JP
さくらのVPS、というかApacheでとりあえずコンテンツを配置して、ブラウザからhttpでアクセスする方法。 httpd.confの UserDir disable の頭に#を付加し、 #UserDir disable として、コメントアウト。 次に、コメントアウトされている #UserDir public_html の前の#を消して UserDir public_html として、設定を有効にする。 ユーザのホームディレクトリに、public_html ディレクトリを作成し、パーミッションを755へ変更。 ユーザのホームディレクトリのパーミッションを711へ変更。 最後に、Apacheを再起動。 /etc/init.d/httpd restart これでチルダ付のURI、http://IPアドレス/~ユーザ名/ といった形でpublic_html以下のドキュメントにアクセスできるように
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
SQL のように HTML を解析できる htmlSQL | Sun Limited Mt.
「真面目にエロサイトを作ってみた」というエントリで紹介されていた、スクレイピングに使われている htmlSQL に興味を持ったので試しに使ってみた。 jonasjohn.de: htmlSQL – a PHP class to query the web by an SQL like language 準備 上記サイトよりダウンロードして解凍した中に入っている “snoopy.class.php” と “htmlsql.class.php” という2つのファイルを使用する PHP からインクルードできるところに入れます。 使い方 実際に Yahoo! のトップページからヤフーニュースのトピックスのニュースタイトルを取ってくるコードを書いてみました。 コードを見てもらえば分かるようにまさに SQL を発行している感じです。 include_once("snoopy.class.php");
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
はてなブックマーク開発ブログ
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。2024年2月のトップ50です*1。 順位 タイトル 1位 マンションリフォーム虎の巻 2位 死ぬほど嫌でした｜佐藤秀峰 3位 「面倒なことはChatGPTにやらせよう」の全プロンプトを実行した配信のリンクを整理しました｜カレーちゃん 4位 管理職必読 順番に読むと理解が深まる「マネジメントの名著」11冊 | 日経BOOKプラス 5位 メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023)｜アプリマーケティング研究所 6位 7年適当に自炊してきて調味料について思ったことを書く 7位 ウクライナ軍に入隊したアジャイルコーチが、さまざまなメソッドを駆使して中隊長としてのリーダーシップを実現した話（
Google Developer Day 2009 に来てます / いってきました - 肉とビールとパンケーキ by @sotarok
午前中は遅れてきたので，メモれなかったけど，入ったときちょうどGoogle Waveのデモやってて，見たいもの見れたってかんじ． あと，Google Maps API v3が近日中に来るよ，とか．いろいろ．v3はAPI keyがいらなくなるらしい．ルート検索用APIがつくとか，いろいろすばらしい．あと，携帯サイト構築用に扱いやすいAPIとか？詳細不明だけど． それと！ Android 携帯の端末を事前登録してた参加者全員プレゼントというサプライズ． ということで，ゲットしてまいりました！！ ちなみに，マスクをも配った．Google．．． 午後からライブ更新します． HTML5により拓かれる次世代Web アプリケーションプラットフォーム HTML4のバージョンアップではあるが・・・ HTMLの役割の変化 文書の共有 -> アプリケーションの土台 HTML5の新機能 オフライン関連機能 SVG
【レポート】5分で把握するHTML5 - Google Developer Dayセッションリポート (1) HTML5仕様の概要 | エンタープライズ | マイコミジャーナル
Google I/Oで大きく取り上げられ、一躍注目の技術に躍り出たHTML5。Google Developer Day 2009でも、「HTML5により拓かれる次世代Web」という田村健人氏によるセッションは大盛況で、椅子が足りずに床に座り込んで聴講する人がかなりの数に上った。 筆者も同セッションに参加し、HTML5の新機能に関する簡潔でまとまった知識を得ることができた。本稿では田村氏のセッション内容を元に、HTML5の全体像をコンパクトにお伝えしよう。 HTML5とは? グーグル ソフトウェア エンジニアの田村健人氏 HTML5は、言うまでもなくHTMLの最新バージョンである。現行のバージョンであるHTML4も、決して小さな仕様ではなかったにもかかわらず、そこにWebアプリケーション向けの機能が大幅に強化された。 あまりに仕様が巨大すぎるため、現在の規格は以下の4つに分けられている。 H
更に制約されたHTML4.01リファレンス（文書指向ウェブデザイン）
HTML4.01の特徴の一つはXMLではないということであり、HTML4.01としての独自のルールをよく知っている限りにおいて、省略できるタグは省略し、テキストエディタなどで編集しやすく、サイズの小さな文書を作成することができる。ここでは、タグによる明示が省略可能である要素（HTML要素、BODY要素など）と、文書指向アプローチにおいて不必要な要素を除き、要素のセマンティクスをある程度制限した。仕様書原典よりも必要な情報へのアクセスが容易なリファレンスの作成が目的である。要は更に制約されたHTML4.01 Strictのリファレンスであり、仕様と異なる部分もあるがまた仕様を逸脱することもない。 表1. 要素一覧 要素名開始タグ終了タグ内容モデル簡単な説明 要素名開始タグ終了タグ内容モデル簡単な説明
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザにやさしいHTML/CSS
HtmlのButtonタグをSubmitさせない方法
IDEA * IDEA
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
WebStorm: The JavaScript and TypeScript IDE, by JetBrains
