CSSの制作・検証に役立つChromeの機能拡張のまとめCSSの制作時や検証時に役立つGoogle Chromeの機能拡張を紹介します。 いくつか機能がかぶっているので、お好みのものをご利用ください。
Jimdo(ジンドゥー)の独自レイアウトでCSSカスタマイズする場合の簡単な解説: Webサービスサーチング
フリーで使えるウェブサービスやツール。 ホームページ制作初心者の方や、ブログなどで写真や画像を加工したい人に、ウェブ上で無料で使えるサイトを紹介していきます。 Jimdo(ジンドゥー) 最近Jimdo(ジンドゥー)のCSSカスタマイズで検索してくる人が結構いたので、Jimdoの独自タグとその中身にあるCSSについて、簡単な解説を少ししたいと思います。 Jimdo(ジンドゥー)の独自レイアウトの反映方法 まずJimdoの自分のページにログインして右上の「レイアウト」の項目を選び、さらにそこから「独自レイアウト」を選びます。 するとこのように独自レイアウトの編集画面が出てくるので、とりあえず左下の「保存」を押すと、 設定された内容の独自レイアウトがサイトに反映されます。 (注意：レイアウトを変更したくない場合は保存を押さないで下さい。) Jimdoの独自タグとその中身について Jimdoではナ
CSSDesk - Online CSS Sandbox
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; } div { background: #fff; margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* border-radius */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* box-shadow */ -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2
少しのコードで実装可能な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
CSS3はとりあえずこれで安心。便利なCSS3ジェネレーター - CSS3 Generator: Webサービスサーチング
ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎 ウェブデザインのレイアウト見本がたくさん載ってます。気に入ったサイトは基本的にブクマしたりしてるんですが、本ベースで一冊 こういうのを持っていると中々便利です。 基本仕事場に置きっぱなしになってます。 ガレリアCSS プロに学ぶスタイルシートの定番デザイン CSS初心者から中級者へのステップアップに。 CSSの基本がある程度わかってきたら次はこの本あたりがいいんではないでしょうか。 ナビゲーションの横並びリストや、positionプロパティあたりがわかりやすく説明されてます。 Wacom Intuos4 Large PTK-840/K0 これが会社にあるとないとでは仕事の効率が断然違う。photoshopやfireworksでの作業速度が一気にあがる気がする。 簡単なイラストとかならいっそ描いた方が早かったりするので。 ぜひとも
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
iPhoneからのアクセスの場合にスタイルシートを切り替えたい場合 - Digital Gate
iPhoneからのアクセスの場合にスタイルシートを切り替えたい場合、動的なページか静的なページかによって、いくつかの方法が考えられる。 ■PHPやPerl等で動的に書き出している場合 $_SERVER['HTTP_USER_AGENT'] を取得して、「iPhone」や「iPod」が含まれるかによって書き出すヘッダを切り替えるようにするのが簡単。 「$_SERVER['HTTP_USER_AGENT']」を使ったサンプルサイト 『Digital Gate for iPhone』 http://iphone.digital-gate.com/ 上記URLをPCとiPhoneで開いてみると、レイアウトの違いが分かるはず。 ■htmlで公開している静的ページの場合 ★Javascriptを使用する方法 if (navigator.userAgent.indexOf('iPhone') != -1
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
最近のブラウザで使えそうなCSSハック
使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。 実際の状況を確認出来るように、デモページもご用意しました。 必要あるか分かりませんがダウンロードも出来るようにしときました。 拡張子がshtmlとかなってるので、htmlにして下さい。 ハックのデモページ デモページのファイル一式ダウンロード(zip:14kb) 主要っぽいハック Win IE6までのハック（アンダースコアハック） .hackTest01 { _background: red; } Win,Mac IE6までのハック（スターハック） * html .hackTest02 { background: red; } Win IE7用のハック *:first-child + html .hackTest03 { background: red; }
50 Awesome Submissions From The CSS Awards - SpyreStudios
The CSS Awards website is like a regular CSS gallery on steroids. It’s not only a showcase of some of the most kick ass web designs around, it also gives a break down of each site and what they rate the sites in forms of design, creativity, usability and content. Today we’re going to feature 50 of the best submissions from the css awards website – don’t forget to check out the CSS Awards to view m
GLASSHOUSE - Cape Town based multimedia website design and development agency
SERVICES We combine our knowledge of design and strategy to deliver solid creative solutions that fulfil our client's needs and objectives. Our focus does not just lie with aesthetics, but also with the usability and marketing strategy behind a design. WEBSITE DESIGN Concepts, Web2.0, XHTML, CSS, Java- script, AJAX, usability and wireframes. BACK-END DEVELOPMENT Intranets, extranets, SMS campaign
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide […] Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect
jCarouselLiteが使えなかったのでjCarouselでカルーセルを組み込む。 - Javaとrubyと男と女
jCarouselLiteがverticalだとIE7で表示崩れがおきてしまい、追っかける気力が なかったのでjCarouselを使うことにした。 やっぱLiteに比べて手順が多いのでメモ。 このガイドに沿って組み込んでいく。 http://sorgalla.com/projects/jcarousel/#Introduction ①この辺をインクルード <script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script> <script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script> <link rel="stylesheet" type="text/css" href="/path/to
css-lecture.com - 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.
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
これはもう使用しない方がいいウェブデザインのトレンド
昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。
CSS で文字サイズを変更する
第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。 今回は「styleswitcher.js」でCSSを切り替えて、サイトの文字サイズを変更するボタンの設置方法を解説します。 「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。 実装手順は以下の通りです。 1. styleswitcher.js をダウンロード 「styleswitcher.js」を以下のサイトからダウンロードします。 「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js からダウンロードできます。 2. font-sizeの値が異な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作関連のチートシートをまとめたポータルサイト -Quickly Code
IDEA * IDEA