HTMLとCSSで手帳アイコンを書いてみました。 / SQUEEZE - Web Design Studio -
話題の「イラストレーターで四角形オブジェクトを1つだけ配置して、すべてアピアランスで作成されたアイコン」をさらにHTMLとCSSで再現された方がいたので、HTMLとCSSだけで手帳アイコンを作ることにトライしてみました。 参考サイトまずは参考にさせていただいた元ネタはこちらです。 ・イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。｜Web Design KOJIKA17 ・Illustrator Unlimited Appearance - suzuki | JAYPEG 両者とも、とてもクオリティが高いですね。及ばないかもしれませんが、レッツトライ。 HTMLとCSSで作った手帳アイコン HTMLとCSSはこちら ※最新のブラウザでご覧ください。 裏表紙 + 紙 裏表紙をベースに「box-shadow」を内側に、「紙」と「紙の影」を左側に4pxと1pxずつ
CSSデザインカタログ | list | li に dl をネストしたリスト
サンプル ライティング テキストテキストテキストテキストテキストテキストテキスト。 XHTMLコーディング テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。 カンプデザイン テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 CSSコーディング テキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 ソース XHTML <ol class="list611"> <li> <dl> <dt>ライティング</dt> <dd>テキストテキスト......</dd> </dl> </li> <li> <dl> <dt>XHTMLコーディング</dt> <dd>テキストテキスト......</dd> </dl
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
よく使うHTMLひながたTOP ｜ahref.org
HTML用ひながた タグ打ち主体のWEBサイト構築で、便利・実用的なHTML、javascript集です。 表示されているHTMLソースをそのままコピーしてご使用できます。 ・ヘッダー関連 文字コード一覧 //SiftJIS、UTF-8、JIS、EUCの文字コード（漢字コード）指定 ページの自動ジャンプ //自動的に特定のURLに飛ばす ・リンク関連 ターゲット指定一覧 //新規ウィンドウを開いたり、フレームを解除したりする サブウィンドウオープン //javascriptでサブウィンドウをオープンする ・フォーム関連 フォーム一覧 //フォームオブジェクト一覧 年月日フォーム //1900年から2020年までの年月日セレクトフォーム 都道府県フォーム //都道府県一覧セレクトフォーム 二度押し防止 //Javascriptでフォーム送信の二度押しを防止する 戻るボタン //Javascr
ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
ブログ用HTML tableタグ 作成ツールの詳細情報 : Vector ソフトを探す！
ソフト詳細説明 ブログのアフリエイトを表示する際に、簡単に縦横に配置するツールです。 縦横並びに表示することにより、ブログの視認性を向上させることができます。 ※縦横自由に設定可能となりました。 アフリエイトのタグは一切加工しませんので安心して使用できます。 フリーソフトですので無料でご使用できます。 また、楽天ブログの場合通常のテーブルタグですと、テーブルの上に 空行ができてしまいますが、楽天ブログ用改行削除のオプションを使用することにより この問題も解決します。 実際にブログに貼り付ける前にプレビュー機能により確認もできます。 楽天アフィリエイト、Amazon アソシエイト(アフィリエイト) 楽天ブログ、ココログ、その他ブログなどHTMLタグを使用できるブログにお使いいただけます。
HTML 5 における HTML 4 からの変更点
この文書「HTML 5 における HTML 4 からの変更点」は、W3C の HTML ワーキンググループ による「HTML 5 differences from HTML 4 (W3C Working Draft 10 June 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 公開日: 2008-06
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家）HTMLコーディングが3倍速くなる？「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図
CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」 - GIGAZINE
「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CSSデザインの試行錯誤が楽になります。 詳細は以下から。 rendr http://gregtaff.com/rendar2.html greaseMonkey版はキャッシュが有効な場合に、ローカルキャッシュのHTMLファイルを直接書き換えてリアルタイムプレビューするというモノになっています。 インストールするにはgreaseMonkeyをインストールした状態で上記ページの「greaseMonkey
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
フリーソフト集 2) Webページ作成 編
フリーソフト集 2) Webページ作成 編 【 ありのごとくあつまりて 】 この記事に含まれるタグ （Keyword） : フリーソフト Vista エディタ リンクチェック カラーチャート スクリーンショット フリーソフト集 2) Webページ作成 編 2008/09/03 (水) カテゴリー： 無料ソフト・フォント等 ホームページ作成 や ブログ作成 に役立つ Windowsフリーソフトを紹介します。 私は今はブログなので、昔ほどソフトを必要としなくなりましたが、それでもあると重宝するものがあるので、そのようなソフトを中心に載せていきます。 『HTMLanguor 』 ☆☆☆☆☆ タグ挿入型 HTMLエディタ ScreenShot XP 2000 98 （私はXP，Vistaで使用） 無制限アンドゥ （元に戻す），タグのカラー化，属性アシスト，置換，大文字・小文字変換...
HTMLとCSSしか書かなかったコーダーは今
HTMLとCSSしか書かなかったコーダーは今なにしてる？ - Hato-Style Twitterとかでも結構いろんな人が反応していてたこのエントリー。自分もふむふむと思いながら読んでおりました。自分も１年半前まではHTMLとCSSしか書かなかった…というかそれしかできない人でした。 今、自分って何をしているのだろう？ まずは自分を振り返る 自分は専門も行くなく、全て独学で学んだHTMLとCSS。半年ちょっとをいろいろなサイトやブログ、本などを読んで、そしていろいろ作ったりして学んだ。 なので２年前の札幌で行われたCSS Niteのときなんかは「HTMLとCSSしかできませんねー」とか「マークアップとかだけですよ」なんてことで名乗っていた。 セミナーとかでも「HTMLとCSSしかできない人は今後は淘汰されていく(消えていく)」なんてことを聞いたりもしていたので「自分も何か勉強しないとなー」
HTMLを楽に管理するためのちょっとしたアイデア - 不定期更新 SEOコラム
SEO対策講座 - HTMLを楽に管理するためのちょっとしたアイデア fseeker.jpが実践している最短距離のSEO対策。今回はHTMLに関するコラムをお届けします。 HTMLの入り組んだタグを楽に管理するためのちょっとしたアイデア div タグを使用しすぎて、あれ？このタグ、きちんと閉じタグ書いたっけ？という経験、ありませんか ちょっと HTML にも慣れてきて。ちょっと色んなタグを書いてみて。ふと出くわす意外な落とし穴。 タグの閉じ忘れ。 今回のコラムではそんな閉じ忘れを100%無くすちょっとしたアイデアをご提供します。 書き方 書き方は簡単で、以下のような書式で HTML にコメントアウトを付けるだけです。
あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.net
home blog labs about contact Web・コンピュータ > あなたのソースコードを彩る、Syntax Highlighterまとめ Syntax Highlighter ソース ブログ 作成： 2007-06-30T19:14:27+09:00 更新： 2009-04-29T00:31:57+09:00 ブログに貼り付けたソースコードを分かりやすく見せたい！ というのはコードを書くブロガーなら誰でも思うはず。 最近はコードを書いてもそのまま貼り付けるだけになってしまっていましたが、やはりソースコードは色づけされて分かりやすい方がいい。 何故かまとまった情報が無いようなので、まとめてみました。 ちなみに、ライブラリを選ぶ最中にまとめたので、どのツールも未使用なのであしからず。 JavaScript系 JavaScriptを使って自動で色分けしてくれるようなツール。 元
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
Keypoints html5
Playstation mk2
HTMLを綺麗に保つ12の原則