[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要素をブロ
デザインに使えるちょっとしたCSSのスニペットいろいろ
Webサイトのデザインには、画像が必須といってもいいと思うんですけど、画像を使わずにピュアな CSS でできるデザインにも、とても素敵なものがあったりします。これからはスマートフォンサイトを作ることも増えそう ...。回線の遅いスマートフォン向けのサイトでは、画像を使わないで CSS のみでデザインする ... っていう機会も増えそうですね。 8 になっても CSS3 が使えない IE ですが、CSS3 を使わなくても、工夫しだいでいろんなデザインエフェクトを表現できますよね！記事中 CSS3 を使ったスニペットもたくさんでてきますが、どれも簡単にできて、ちょっとデザインを素敵にする？コード集です。自分のブログなどでやっているものを中心に、少しまとめてみました。 ちょっとした CSS スニペット 目次 ボックスに使うCSSスニペット テキストに使うCSSスニペット 画像に使うCSSスニペッ
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
CSS3グラデーション・角丸のジェネレーターをjQuery/CSS3/HTML5で作成するチュートリアル
jQuery, CSS3, HTML5を使用して、CSS3グラデーション・角丸を生成するCSS3ジェネレーターを作成するチュートリアルを紹介します。 Creating a CSS3 Generator with CSS3, HTML5 and jQuery デモページ ※デモはWebkit系ブラウザ（Chrome, Safari）で動作します。 [ad#ad-2] 上記デモでは、CSS3グラデショーン（上のキャプチャ）、角丸（下のキャプチャ）のCSS3をブラウザで表示確認しながらコードを生成できます。 チュートリアルでは、HTML5のDOCTYPEの解説から、各要素へのスタイルシートの適用まで詳しく解説されています。 時間がない方は、とりあえずページ下のファイル一式をダウンロードすると、上記のデモがそのまま楽しめます。
50 Cheatsheets & References Guides for CSS – Speckyboy
As CSS continues to evolve at a rapid pace, it’s crucial but also challenging to stay updated with the latest developments. With an overwhelming amount of information to digest, it can be difficult keeping up. However, the benefits of keeping up with the latest CSS developments are significant. Mastering new techniques and staying current with best practices can help you create stunning, responsiv
CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう！！ つづきからどうぞ！ すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ！ ここまでレベルの高いボタンはつくれないので、 基本重視のシンプルなCSSボタンをつくろうと思います。 まずはC
metaタグを追加してFacebookに対応する方法とハマりやすいポイント
Facebook使ってますか？ こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね！」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね！」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ！ 「いいね！」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね！」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね！」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って
WordPressをマガジンサイト風にする為の基本的なカスタマイズ法 - かちびと.net
備忘録です。普通のWordPressテーマを マガジンサイトっぽくする必要があって、 カスタマイズしたのですが、方法を忘れ そうなのでメモ。大したカスタマイズじゃ ないです。基本的な内容になりますので あまり参考にならないと思います。 マガジンサイトと言っても色々形はあるんですが、複数の指定したカテゴリの最新記事～過去記事を何件かまとめてTOPに出したいのと、デザインもカテゴリごとにそれぞれ変えたい、というご要望でした。 もっとスマートな方法があるかもしれないんですけどね・・ WP3.0のデフォルトテーマでやってみる WP3.0でデフォルトテーマになったtwentytenを使用して書いておきます。通常は上記のように表示されますが、これを以下のように cssを変えないとアレですけど、 表示させたいカテゴリ名を表示 表示させたカテゴリの最新記事とリンク 表示させたカテゴリの過去記事へのリンク
WordPressで困った時に役立つお助けコード8つ
2013年3月23日 Wordpress WordPressでコーディング中、「理由はなんだかわかんないけどちゃんと動作してくれない！」なんて事がありませんか？私は度々ありました。その都度ググって解決策を探していたのですが、そのお助けコードメモがEvernoteに結構たまってきたので記事にしてみます。よくわからないけど動かない！という時に試してみてください！ ↑私が10年以上利用している会計ソフト！ お助けコードを使う前に 今まで動いていたのに突然動かなくなった！そんな時は慌てず、とりあえず以下を確認してみてください。プラグインが原因で動作しなくなる事が多いですね。 有効化しているプラグインをすべて無効化して試す </head> の前に <?php wp_head(); ?> があるか </body> の前に <?php wp_footer(); ?> があるか PHPコード（特にif構文
[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ
CSS3のanimationプロパティ使うと、なんでも点滅させることができます！ （現在、Chrome3以降、Safari4以降でしかサポートされていません） とりあえず、CSSファイルに、下記ソースをコピペしてみましょう。 @-webkit-keyframes pulse { from { opacity: 1.0;/*透明度100%*/ } to { opacity: 0.8;/*透明度80%*/ } } .blinking{ -webkit-animation-name: pulse;/* 実行する名前 */ -webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */ -webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */ -webkit-animation-tim
![[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/072ca1f71fdf67b5c3238bdc976312dbbbe3fa40/height=288;version=1;width=512/https%3A%2F%2Fshirasaka.tv%2Fimg%2Fogp.jpg)
最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集:phpspot開発日誌
70 Photoshop Tutorials For Text Decoration From 2010 - SloDive 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集のご紹介。 次のような新しいロゴデザインのチュートリアル集です。非常に凝ったものもあって、こなしてみると楽しそうです。 どれも素晴らしいロゴデザインばかりですが、これらのチュートリアルをこなせば、センスも磨かれつつ、テクニックも相当つきそうですね。 関連エントリ あの有名プロダクトのロゴを作るPhotoshopチュートリアルいろいろ 映画のタイトルロゴのような非常に美しい光と文字を描画するPhotoShopチュートリアル クールなネオン風ロゴを作成するPhotoshopビデオチュートリアル 車のエンブレムのようなカッコいいロゴを作るPhotoshopチュートリアル ５０のクールロゴ作成Phot
[CSS]あなたのウェブデザインに繊細を加える珠玉のスタイルシート
繊細のポイントは「気がつくかな？」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。 Take Advantage of CSS3 to Achieve Subtle Design デモページ 下記は各ポイントを意訳したものです。 はじめに 繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。 私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。 繊細なデザインが難しいのは、「もう少し多くした方がいいのかな？」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。 以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。 1. transi
複数ブログの更新情報をまとめて表示させる方法 | POP*POP
今回の「諦めている不便利」は、positiveさんの投稿をご紹介します。投稿ありがとうございました！ 何個かブログをたちあげているのですが、その更新情報を別のwebサイト上に表示できればと思っています。 いろんなティッカーなども探してみたのですが、これ、といったものがなかったものですから。 もし、いいのがあればご紹介いただければありがたいです。 positiveさんは複数のブログをお持ちとのことですので、『Yahoo Pipes』と『レビューポスター』のあわせ技はいかがでしょうか？ 『レビューポスター』は、本来、レビュー記事をまとめてブログに表示させるものですが、RSSを読み込ませてブログパーツを作ることもできます。 試しに、100shiki、popxpop、simplexsimple、 ideaxideaの4つのサイトの更新情報まとめて表示させてみました。 詳しくは以下からどうぞ。 作成
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Homepage
EC-CUBE開発Wiki
IDEA * IDEA
[CSS]サイズが不明なボックスいっぱいに背景画像を表示するスタイルシート
[JS]テーブルのデータをアニメーションでソートするスクリプト -Animated table sort
http://www.windyroad.com/archives/52
