Webページの背景を動画にするときのお作法 - フロントのエンド
videoタグで動画を呼んで背景的に使う場合は、モバイルとPCで処理をわけておかないとダメっぽい。 というのも videoタグにて動画を呼んでくると <!-- html --> <video src="videofile.ogg" poster="posterimage.jpg" autoplay="autoplay" width="300" height="150"> <source src="path/to/hoge.mp4" type="video/mp4" /> <source src="path/to/hoge.webm" type="video/webm" /> </video> コード自体はこういう感じになるわけですが、 これをこのままモバイルで見ると たいていは自動再生に対応してないので、再生ボタンがガッツリとでちゃいます。 考え方なので、 <!-- html --> <d
HTML5のvideoタグを使った動画再生に関するまとめ
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
表セルに `min-height` を効かせてみるテスト
min-height と max-height の適用対象は、CSS仕様書にはこう定義されています。 all elements but non-replaced inline elements, table columns, and column groups 10.7 Minimum and maximum heights: 'min-height' and 'max-height' (CSS 2.1) all elements but non-replaced inline elements, table rows, and row groups 8. The ‘min-width’, ‘max-width’, ‘min-height’ and ‘max-height’ properties (CSS 3) ただし、CSS 2.1仕様書の本文を読むとこんなことが書いてあります。 In
携帯サイトのDOCTYPEについて - スマホ・モバイル講座 - [SMART]
docomo、au、softbankの携帯端末に対応したXHTMLを作る際、DOCTYPEの宣言の違いに注意する必要があります。 現在、キャリアごとに推奨されているDOCTYPEの宣言が異なります。 docomo 例：Compact HTML（CHTML）用のDOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN"> 例：iモード対応XHTML 1.0用のDOCTYPE <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd"> au <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN
![携帯サイトのDOCTYPEについて - スマホ・モバイル講座 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
Googleも推奨するSEOも有利なレスポンシブwebデザインのサンプルを作ってみました。
何かと話題のレスポンシブwebデザイン。ちょっと前にgoogleさんも「レスポンシブwebデザインでどのデバイスでも最適に表示できるようにしろー」って言ってて、今回仕事でサイトを新設する機会がありましたのでどうせならと思い挑戦してみました。 レスポンシブwebデザインってどんなデバイスでみても快適にみれるようなデザインってことです。 ゴールデンウィークってなんでしたっけ？普通に仕事してます水口です。 さて、ブログを始めてから「できるだけ毎日更新しよう」と思ってましたが、さっそく2週間ほどサボっていました。もう4月もおわりですね。書くのが遅くてもう5月です。 仕事でレスポンシブwebデザインって仕組みでサイトを作る案件があったので、いろいろメモっときます。それにしてもこのブログ、基本的に仕事の事は書かない方針なんですが… レスポンシブwebデザインとは？ ブラウザの幅に合わせ最適なレイアウト
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
テンプレートエンジンのススメ | 前編 テンプレートエンジンとは
テンプレートエンジンのススメ 前編 テンプレートエンジンとは 昨今、JavaScriptの役割がいろいろと増え、サーバーからもらったデータをもとに、HTMLの断片を作るという処理が増えてきました。そのような場合に役立つテンプレートエンジンについて解説します。 はじめに 昨今、JavaScriptの役割がいろいろと増え、サーバーからもらったデータをもとに、HTMLの断片を作るという処理が増えてきました。このようなケースではテンプレートエンジンを使うと、よりスマートにコードが書けます。このシリーズでは、2回にわたって、テンプレートエンジンとHandlebarsというライブラリについて解説します。 テンプレートエンジンとは まず、テンプレートエンジンとは何かというところから解説しましょう。テンプレートエンジンとはデータとテンプレートを合体させ、文字列を作る仕組みのことです。 JavaScript
Bootstrap
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.2.3 v5.1.3 v5.0.2 Previous releases v4.6.x v3.4.1 v2.3.2 All versions Get Security Updates for Bootstrap 3 & 4 Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life w
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
HTMLタグ/ページ全般タグ/キャッシュの有効期限を指定する - TAG index
キャッシュの有効期限は、日時（グリニッジ標準時）または秒数で指定します。 この指定を行なった場合でも、ブラウザにキャッシュが残ってしまうケースがあるようです。 日時（GMT）で指定した例 <meta http-equiv="Expires" content="Fri, 31 Dec 2010 23:59:59 GMT"> Fri, 31 Dec 2010 23:59:59 GMT … この例では、グリニッジ標準時：2010年12月31日（金）午後11時59分59秒を指定しています。 秒数で指定した例 <meta http-equiv="Expires" content="86400"> 86400 … この例では、86400秒後（24時間後）を指定しています。この値に 0 を指定すると、キャッシュを無効にすることができます。 使用例 <!DOCTYPE HTML PUBLIC "-//W3
Zen-Coding、0.7のすすめ
Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。 使いこなしてコーディング速度が3倍になっていますか？ SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。 エディタのサポートは、3つの分類に分かれます。 公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E
よく使うHTMLひながた ＞ 都道府県一覧セレクトフォーム｜ahref.org
北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 <select name="pref_id"> <option value="" selected>都道府県</option> <option value="1">北海道</option> <option value="2">青森県</option> <option value="3">岩手県</option> <option value="4">宮城県</option> <option value="5">秋田県
Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法 - EC studio デザインブログ
Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。 Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。 JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。 zen_setting.jsに秘密がある Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。 実はその中に、省略コードやスニペットがすべて書き込
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
[php]checkboxの取得について～その1
一個前に記事に書きましたが、やはりcheckboxのvalueの取得方法について気になったので、調べてみることにしました。 まずは、ためしに以下のソースを作成。(以下、html、head、titleタグを省略) <body> <form action="./test.php" method="post"> <input type="checkbox" name="foo" value="1">りんご<br> <input type="checkbox" name="foo" value="2">オレンジ<br> <input type="checkbox" name="foo" value="3">バナナ<br> <input type="hidden" name="flg" value="1"> <input type="submit" value="Run"> </form> <?ph
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
IFRAME を使わない方法の補足 | WWW WATCH
phpspot開発日誌さんで紹介されていた 「IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法」 を読んでちょこっと補足。 人気エン... XHTMLではiframeタグは禁止されているのでValidにしたい場合はこっちを使ったほうがよいらしいです。 iframe 要素は、HTML4.01 Strict 及び XHTML1.0 Strict では未定義 （Transitional、Frameset では定義済み）、XHTML1.1 では廃止されていますので、Strict でコーディングする際に外部オブジェクトを (X)HTML によって読み込むには object を使うことになりますね。 で、object 要素の DTD はどうなっているかというと、（XHTML1.0 Strict） <!ELEMENT object (#PCDATA | param | %bl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLタグ/ページ全般タグ/ページをキャッシュさせない - TAG index
オフライン キャンペーンのトラッキング - Conversion University ヘルプ