君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM
知っている方には、すみません。 HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。 ちょっと試してみましょう。 <div contentEditable="true">ここは編集できる</div> ↑ ここは編集できるのです。(ただの <div> 要素なのですが！) 編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。 body要素に contentEditable 属性をつけてみる さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。 JavaScript コードはこんなかんじ。 javascript:(functi
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
【SEO対策】リリース後2週間で10万PV突破！サイト製作段階で絶対に行いたい2つの施策｜Monosyブログ
ツイートはじめに こんにちは。先日「ゆとり世代の文系でも一人でWebサービスを作ってみました」を公開し、β版の告知を行いました。 そこから2週間経ったところなのですが、早くも10万PVを突破しました！ 多くの方にご覧頂け嬉しい限りです。 上記の記事と同時にSEOについても「キーワードで稼ぐ時代は終わった！これからのSEOはページでアクセスを稼ぐ時代」を公開しましたが、不人気すぎてSEO記事は成果が出せるまで封印しようと思っていました苦笑。 2週間で10万PVなら良しとしようということでSEO対策の記事に再挑戦です。 前回の記事は前提だけで具体例がなかったので、今回はサイト製作段階に行うことをおすすめする2つのSEO対策について書きます。 サイト製作段階でなくても、SEO対策としては効果的な施策なので、是非参考にしてみてください！ アクセス状況の報告 まず始めにここまでのGoogle Ana
Webシステムのフロントエンド高速化で最初にやるべきこと - かみやんの技術者ブログ
前回のエントリーで、Dartの次は、TypeScriptを検証する。と書いたけど、なぜか自分のPCでは、VisualStudio for WebにTypeScriptのプラグインがインストールできなかったので、TypeScriptを使うことを諦めました。コマンドラインでコンパイルはできたけど、それでは型付け言語のメリットであるIDEによる補完や参照検索やリネームリファクタリングが効かないので。ちなみにプログラマのPCではあっさりインストールできたとのこと。がっくり。 というわけで、Dartを実戦投入することを決定してDartで開発をしています。 フロントエンド高速化のExpiresヘッダ さて、今日の本題。Webシステムのフロントエンド高速化のお話です。Webシステムの速度の大きなボトルネックとしてDB負荷がありますが、ブラウザ側のレンダリングを高速化する話としてフロントエンド高速化があり
ページ内に別サイトを縮小表示させたい。
初心者の質問で大変恐縮です。 現在スケジュール管理を別サイト（フリーサイト）で管理しています。 自分のページ内にそのサイトを縮小して表示したいのですが、方法はありますでしょうか？ インラインフレームでは表示できるのですが、ページ内に収まらず、スクロールする状況です。 ページ内の任意の大きさに指定したフレームの中に縮小表示したいです。 質問内容が上手く表現できなくて大変恐縮です。
無料なのに高機能！ 入力補助付きのHTMLエディタ5つ紹介 - Webデザイン初心者向けのあれこれ
あけましておめでとうございます！ 今年も当ブログをよろしくお願いします。 皆さん、お正月をどのようにお過ごしでしょうか。 新しい年を迎えたということで、Web制作の新しいお供を探してみるのはいかがでしょう？ 今日は「入力補助付きのHTMLエディタ」をご紹介します。 ■Crescent Eve http://www.kashim.com/eve/ 軽くて多機能なエディタです。HTML5に対応しています。 タグ、属性の入力補助の他に文法チェックやショートカットの機能もあります。 「Ctrl」＋「Enter」でその場所の適切な閉じタグが入力出来る、という機能がかなり便利です。 ■ez-HTML http://www.w-frontier.com/software/ezhtml.html コードの編集からFTPでのアップロードまで出来るエディタです。タブ機能付き。 ちょっと編集してアップロードする
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
HTML上で直接CSSを編集！次世代エディタEdge Code | DECONCEPTER
HTMLコーディングの次世代標準機能を備えるエディタ 先日紹介したAdobe Edge Tools & Servicesのエディタ担当Adobe Edge Codeを紹介します。対応OSはWindowsとMac OS Xで現在プレビュー版で無償で使うことができる。 先行して公開されているオープンソースプロジェクトBracketsをコアに採用しており、革新的な機能が備わっている。次世代エディタの標準となりそうな機能の解説を盛りだくさんでみていこう。 尚、ショートカットはMacベースで説明します。Winの方は適宜CmdをCtrlに読み替えてください。 HTMLファイル上から各タグのCSSを直接オープン これは感動的過ぎる。HTMLファイル内のスタイルを編集したいタグにカーソルを合わせ、Cmd + Eを叩くと、なんと直下にCSSの定義が呼び出されて表示される。奇跡だ。 なぜこの機能を今まで他のエ
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho
Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定するスライドごとの動きはimpress.js同様、カスタムデータ属性で操作します。 <div class="mosho-slide" id="3d-transform" data-x=1120
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 - もとまか日記
以前から書いてる、以下の開発向け簡単チュートリアル。 iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム 今回は、これをHTML5のCanvasで作ってみました。 で、ついでにチュートリアル的な内容を書いてみたメモ。 前提条件 前提条件として、ある程度HTML等が分かる人向け、という感じです。また、レンタルサーバの利用等についても割愛です。 その辺の詳細な説明は省いてるのでご了承ください。 HTML5の基礎情報 以前、以下でまとめました。 前から気になってたHTML5について色々調べてみました HTML5のスマホアプリの基本構成 ここから本題のコーディング。今回使う、スマホアプリ向けの基本となるHTMLは以下です。 html> head> meta name="viewport" content="width=device-width, initial-scale
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2013/10/20131001.php
CSS3だけで作るボタンデザインいろいろ