実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
CSS Sticky Footer Layout It Sticks to the Bottom of the Page! See that footer, way down there? It's stuck to the bottom of the page even when thin on content. Otherwise it would be floating halfway up the page. Use the code and assets on this website like new UK gambling sites do and your site will be looking perfect in next to no time! Cross Browser Support for Sticky Footer Code This sticky foot
ゼロから作るWPテーマ[WordPressテーマ作成 #1] | PAOLOG
こんばんわ^ ^。 そろそろWordPressのテーマを勉強する気になってきたのでテーマ作成に挑戦しようと思います。テンプレートタグにはどんなものがあるかとか、どういう風に書けばいいのかとかほとんど知識なし。もうゼロからのスタートになります。 しばらくは次のような方向でいきます。 index.phpテンプレートからはじめる テンプレートタグはひとつずつ理解していく 調べてもわからないタグはとりあえず無視 ウィジェットに対応・・・するかは微妙 将来的にはテンプレートの雛形になるように テーマの名前は単純に「Theme Base」 デザインは考えていない のちのち個人的にコーディングしやすいようにidやclassは随時追加しておく ブログに基本情報は次のとおり。 XAMPP1.7をインストールしたローカル環境にWordPressをインストール URL：http://lo
IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary
最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ１度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p
MdN Design｜総合情報サイト
Web制作が楽しくなるCSS3/JavaScriptのテクニック50 - 海外デザイン事情第6回 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.10.30 WED 第6回「Web制作が楽しくなるCSS3/JavaScriptのテクニック50」 2010年02月15日 ブラウザ対応が進み、本格普及が間近となったCSS3。海外ではすでに多くのCSS3を使ったデザインテクニックが公開されている。ここではSmashing Magazineに掲載された「50 Brilliant CSS3/JavaScript Coding Techniques」をもとに、CSS3に関する海外の最新テクニックを紹介しよう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Brillia
Zen-Codingでできるあんなことこんなこと | gaspanik weblog
先日超速コーディング？としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。 HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします（どちらかと言えば、こっちが本当のZen-Codingなんでしょう）。 ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…（はず 笑）。 文書構造がわかってれば、1行書いて一気に展開できるZen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-Text
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
いまからでも遅くない！ ケータイデザインの基礎固め
いまからでも遅くない！ ケータイデザインの基礎固め：一撃デザインの種明かし（6）（1/2 ページ） 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった！ ケータイデザインの基礎の基礎 ケータイの画面サイズを考える！ 一般的な画面サイズはQVGA（縦320px×横240px）ですが、最近ではQVGAワイド（
知っておきたい使えるCSSテクニック25 – creamu
Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ
CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法 | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
pooliestudios Digitalagentur von Alexander Kaiser & Freunden
pooliestudios entwickelt digitale Champions. Die Agentur hinter HomeToGo, EatHappy, der BBBank und noch ein paar weiteren... Inhouse-Services Strategie & Consulting Für Wachstum und Innovation. Research, Consulting, Business Strategy, IT Strategy Konzeption & UX Die Basis für jedes Projekt. Technical Concept, IT/System Architecture, User Experience Marketing Für mehr Kunden und Umsatz. Content Str
リストタグを使ったメニューサンプル
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
リストにチェックマークを付ける：CSS小技
リストにチェックマークを付ける方法 1：ソースコード （1）HTMLコード <ul class="list-bg"> <li><a href="">項目1</a></li> <li><a href="">項目2</a></li> <li><a href="">項目3</a></li> </ul> （2）CSSコード ul.list-bg, ul.list-bg li { margin: 0; padding: 0; } ul.list-bg { margin-left: 12px; } ul.list-bg li a { padding: 5px 10px 3px 28px; background-image: url(チェックなし画像のURL); background-repeat: no-repeat; background-position: left center; text-de
[CSS]リスト要素を使用したスタイルシートの5つのトリック
ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </
CSS Decorative Gallery - Web Designer Wall
Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-852.html
Website speed test | Check your page performance - Site24x7 Free Tools
LAGRANGE BLOG ~web-design~ - cssでlistの画像を背景画像で置き換えたがブラウザ差異が出た。