HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
主要メーラーのバグを回避するHTMLメール用テンプレート -Email-Boilerplate
Gmail, Outlook, Yahoo Mail など主要なメールアプリケーションに対応した、HTMLメールの主要なレンダリングの問題を避けるために開発されたテンプレートを紹介します。 合わせて、HTMLメールの作成に役立つポイントをまとめたスライドショーも紹介します。 HTML EMAIL BOILERPLATE Email-Boilerplateとは Email-BoilerplateはHTMLメールを作成する上で、主要となるスタイルをはじめ、各メールアプリケーションのバグを避けるためのものです。 テンプレートは大きく分けて、head箇所とbody箇所があります。head内にはグローバルなスタイルが定義されており、body内にはHTMLのデザインに必要とさせる要素と特定の修正箇所が含まれています。 これらは、そのまま利用してもよし、あなた自身で必要なものを加えたり、削除して使用して
基本的なフォーム -- ごく簡単なHTMLの説明
この例をもとに、HTMLのフォームを構成する要素を順番に説明していきます。この例のHTML全体は、本章の最後で改めて紹介します。 フォームの基本枠組み データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。フォームはこのための手段を提供します。 HTMLのフォームは、データを入力するための手段（コントロールと呼びます）と、それに関するラベルや説明から構成されるひとまとまりのセクションです。「何を」送信するかを示すためにこのセクションの範囲を明示し、「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。 form要素の構造 form要素タイプは2つの主要な属性を持ちます。ひとつは「どこに」、つまりデータを受け取るプログラムを指定するaction属性、もうひとつが「どうやって」、つまりデータの送信方法を指定するmethod属
SEO狙いでタイトルタグを変えるとどうなる？ » 海外SEO情報ブログ・メルマガ
最近のGoogleは長いタイトルを評価する傾向にあるという記事を、先日書きました。 この記事を読んでタイトルタグを変えた読者がいたとしたら、怒られるようなスレッドをWebmasterWorldで見つけました。 タイトルタグを変更すると、順位が大幅に下がるというのです。 スレッドを立てたメンバーは、SEOにより効果的なタイトルにするためにタイトルタグのキーワードの順番を変えました。 ▼変更前 CompanyName – Get your keyword1, keyword2, keyword3 & keyword4 Quote Now from Company Name ▼変更後 CompanyName.com ¦ Company Name Keyword1 & Keyword2 Quotes “CompanyName”は「会社の名前」、”Keyword”は「狙っているキーワード」です。 変
タイトルタグを作るときに意識したい７つのポイント | ウェブ力学
タイトルタグは様々な観点から見ても最も重要なHTMLタグといっていいでしょう。ここでは、サイトのトップーページと個別記事（サブページ）のタイトルタグを作成する場合に意識しておきたいポイントを紹介します。 １．ターゲットとするキーワードを含める SEOの観点からもクリック率を高める観点からもタイトルタグにキーワードを含めることは大切です。 数年前に比べると、特にYahoo!においてタイトルタグにキーワードを含めた場合のSEOスコアが弱くなった印象がありますが、それでも最も重要なタグであることに変わりはありません。また、検索されたキーワードは強調表示されますので、検索結果で目立つことになります。 SEO狙いで無理やりキーワードをタイトルの先頭に入れようとする人もいますが、無理してまで先頭に拘る必要はないでしょう。 ただし、キーワードが前方にないと検索結果で目立たなくなってしまいます。検索結果で
SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」
検索エンジン対策、いわゆるSEOが流行した(している)おかげで、headタグ内にmetaタグの「keywords」(キーワード)と「description」(概要)を入れるのは当たり前になった風潮があります。すでにこのタグで検索順位が上がることはまずないでしょうが、適切に入れれば未だに有効であるのは間違いありません。 特にGoogleは検索結果にdescriptionを表示することが多い*1ので、全てのページに同じ概要を入れていると非常に残念な結果になることがあります。ちなみにYahoo!の場合は、カテゴリ登録されているとサイトのトップページ*2は本文やdescriptionを無視してその説明文が表示されるようになっています。(例) 1 : descriptionの文章が採用されないこともよくあり、いつも同じ挙動をするわけではない。 2 : 正確には「登録されているページ」はそうなる模様。
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
higash.net
higash.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル
CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。 その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。 画像の使用は一切ありません。 CSS drop-shadows without images デモページ [ad#ad-2] デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+ です。 下記に、デモにある5つのドロップシャドウを紹介します。 HTML HTMLはdiv要素にスタイルシートを適用します。 5つのドロップシャドウはclass名を変更するだけです。 <div class="drop-shadow round"> <h1>CSS drop-sh
カッコいい管理画面のHTMLテンプレート総まとめ:phpspot開発日誌
カッコいい管理画面のHTMLテンプレート総まとめ。 これまで紹介したエントリや、新しく発見したエントリで紹介されているものを全てマージしてみました。 有償のものも混じってますが、カッコいい管理画面を作りたいといった際にカタログ的に使ってみてもいいかも。 独断ですが、クオリティ順に並べ替えてます。 Simpla Admin Boxie Admin Complete Liquid Admin InAdmin Admin (FREE) Adminizio Lite – Admin Template Admin Templates - Professional XHTML Back-end Template Spring Time – Simple Admin Template Internet Dreams Admin Skin Visual Admin ThePixelDeveloper Ad
【ハウツー】HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発「PhoneGap」 (1) HTML＋CSS＋ＪavaScriptでiPhone/Androidアプリを開発 - PhoneGapとは | エンタープライズ | マイコミジャーナル
Notobiは11月1日(米国時間)、PhoneGapの最新版であるPhoneGap 0.9.2をリリースした。PhoneGapはクロスプラットフォーム・モバイルアプリケーションの開発フレームワーク。デベロッパはHTML＋CSS＋JavaScriptを用いて、iPhone/Android/BlackBerry/Symbian/Palmのネイティブアプリケーションを開発できる。各デバイスのモーションセンサやカメラ、GPSにはPhoneGapにて提供されているJavaScript APIをもちいて操作する。同ライブラリはThe "New" BSD LicenseおよびThe MIT Licenseのデュアルライセンスのもとで公開されているオープンソースソフトウェア。 PhoneGapでのスマートフォン別機能対応表 - PhoneGap Supported Featuresより抜粋 iPhone
[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル
Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML：スタイルシート無しの状態 CSS：リンクをブロックレベルに CSS：さらによい実装方法 [ad#ad-2] HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS：リンクをブロックレベルに a要素をブロ
高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
120+ PSD to HTML チュートリアル【記事紹介】
あとで絶対お世話になりそう過ぎる記事だったので、なんも紹介する気が無いと言うか、ほんと単に私の超ブクマ記事。 PSDデザイン→Html、CSSにする様が120掲載されている。（本当は77しかないけど） 以下からどうぞ 120+ PSD to HTML Conversion Tutorials | Marked Lines 上記に全てあります。 中はまとめ記事をまとめている感じです。 20+ Best Tutorials to Convert Psd to Html/CSS | Dzine Blog 25 Ultimate Useful PSD to HTML Tutorials | Tutorial Lounge 15+ Website Design Converting PSD to HTML/CSS Tutorials | Tutorial Lounge 38 Great Tutori
[CSS]モバイルデバイス用のスタイルを初期化するフレームワーク -CSS Mobile Reset
iPhoneなどのモバイルデバイスを対象とした、スタイルを初期化するCSSのフレームワークを紹介します。 CSS Mobile Reset キャプチャ：Demo 2（Demo 1もあります） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS Mobile Resetの指針 CSS Mobile Resetのスタイルシート Media Queriesを併用 CSS Mobile Resetの指針 このフレームワークは下記を指針として、現在もプロジェクトとして進行中のものです。 軽量にすること。 必要なHTML要素のみリセットすること。 必要なHTML要素のみを用意すること。 より良いタイポグラフィを提供すること。 軽量にすること モバイルデバイスでのインターネット接続はスピードが遅く、そして高価です。そのため、CSSファイルをより軽量にし、速いダウンロードを提供することが良い
HTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」
HTMLを書いていて、心がけていても時間に追われているとだんだんと乱れてきて、インデントされていなかったり、ルールがバラバラなソースになってしまうなんてことも多いと思いますが、今日紹介するのはHTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」です。 利用方法は非常に簡単で、WEB上で、HTMLをコピペ、その後設置されている「COOK!ボタン」をクリック。これだけです。 詳しくは以下 このサービスにはHamlというHTML/XHTMLを生成するためのマークアップ言語が使われているみたいで、「HTML → 一旦hamlにする → HTMLに戻す」という流れでインデントの整頓を実現しているとのこと。hamlに興味のある方は「日本Hamlの会」もどうぞ。 実際、インデントが無くても問題なく、動作しますし、整ったからと言ってオモテ面に影響があるわけでないのですが、メンテナ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creativeoverflow is coming soon
titleタグ、metaタグおよびURLの構造――『検索エンジン最適化の初心者ガイド』改訂版#4-2 | Web担当者Forum
HTML4から変化したHTML5のマークアップ ここが違う！サンプルで見るHTML5（2）
