[CSS] 美しいパンくずを実装する4つのスタイルシート | コリス
画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
こんなに高品質なのに無料で利用できるCSSベースのテンプレートのまとめ
企業用サイト用をはじめ、コマース用、ポートフォリオ用、ブログ用などの高品質ながら無料で利用できるCSSベースのテンプレートを紹介します。 テンプレートは1ページだけのものから、配下ページなど複数のページが揃っているものもあります。 ※テンプレートは全て無料で利用が可能ですが、ライセンスを必ず確認してください。
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０:phpspot開発日誌
20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集
ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
テーブルやリストを使用した価格表のデザイン集
プロダクトやサービスを販売しているサイトにとって非常に重要な価格表のデザイン集を1st Web Designerから紹介します。 40 Fantastic Pricing Tables for Your Inspiration 価格表はその設計を決しておろそかにするものではなく、直観的で使いやすく、ユーザーに最も重要な情報を提供する非常に重要なコンテンツです。 上記サイトでは、シンプルなテーブルからフューチャーリストなど優れた手段で価格表を提供しているサイトが多数紹介されています。 その中から、下記にいくつかピックアップしました。 傾向としては、ページ幅いっぱいに配置し、お勧めを目立つようにしています。
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
jQueryのかっこいいスライドショースクリプト28 – creamu
かっこいいスライドショーを作りたい。 そんなときにおすすめなのが、『28 Useful JQuery Sliders You Need To Download』。jQueryのかっこいいスライドショースクリプト集です。 かなりいい感じのものが揃っています。 Automatic Image Slider w/ CSS & jQuery CSSとjQueryで作られた、自動でスライドするギャラリー Animate Panning Slideshow with jQuery 大きい画像の一部がパンしながら移動するスライドショー SlideDeck jQuery plugin とてもかっこいいスライドショー。無料版と$99の有料版がある。Basecampのサイト等、実装例多数 jQuery Infinite Carousel スムーズな動きのカルーセル（イメージスライダー） Easy Slider
32 High Quality Free Html/CSS Templates For Download
32 High Quality Free Html/CSS Templates For Download By Vikas on Mar 25th, 2010 in Design Save On Delicious Share Free Website Templates are always valuable for those people who don’t know much about coding or designing the website. But now-a-days, there’s no worry if you don’t know creating a website personally because there are lots of kind designers and developers who submit their high quali
Web制作に役立つサイト集 – creamu
6133716, Hemera/ Thinkstock Web制作の参考になる情報を探している。 そんなときにおすすめなのが、『All Showcases』。Web制作に役立つサイト集です。 CSSやFlashなどのカテゴリーに分けて、かなりたくさんのサイトがまとまっていますね。 いくつかご紹介します。 CSS Best CSS Design ブログ型のCSSデザインギャラリー CSS Flavor クールなサイトを集めたCSS Flavor Flash Design Charts 週刊のかっこいいFlashサイトランキング DOPE Awards クールなFlashサイトをグリッド状に並べているDOPE Awards その他 CMS Showcase CMSで構築されたサイトギャラリー We Love WP 美しいWordPressで作られたサイトのデザインギャラリー サイト名やUIもか
CSSビギナーに気をつけてほしい5つのポイント | コリス
スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex
クオリティの高いWebデザインを見たい時はThe Css Awardsがいいかも
ハイクオリティ、綺麗なWebデザイン を見たいときはThe Css Awardsが 良いかもしれません。ここは素敵な Webデザインのサイトを毎日紹介 しているギャラリーで、厳しい審査 の元、1日1サイトが選ばれるサイト です。 そんなサイトなので、The Css Awardsに掲載されているWebデザインは基本的にクオリティが高そうです。有名なサイトみたいですが、最近知ったので改めてご紹介します。 素敵なデザインばかりですよ。審査してもらうにはお金が掛かるみたいですが、掲載されているサイトを見ると、ちゃんと厳選してくれてるっぽいですね。 The Css Awardsの歩き方簡単では有りますが、特徴をご紹介します。 検索 上部のMENUにマウスオーバーするとメニューが表示されます。そこでカラー検索やタグ検索が可能です。ascendingにチェックを入れると点数の低い順、descending
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SASSIENCE ～ 世界が嫉妬するCSSへ
http://e0166nt.com/blog-entry-862.html
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集