[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル
jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Questionクリック時 実装 Step 1: 外部ファイル 「jquery.js」を外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> Step 2: HTML 質問はh3要素、回答はp要素で実装し、div要素で内包します。 <div id="w"> <h2>User Accounts</h2> <div class="q"> <h3 class="qhead"><a href="#q01">よくある質問</a></h3> <div clas
[CSS]初心者にも分かりやすいスタイルシートのチュートリアル
スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。 Styling Post Headings That Stick Out demo 下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。 Step 1. Wireframe – HTML ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="post"> <div class="postheader"> <!--ヘッダ--> </div> <!--コンテンツ--> </div> </textarea>
Modern UI（旧：Metro）デザインのボタンやフォームを簡単に実装できるライブラリ -CSS3 Microsoft Modern Buttons
週末に発売予定のWindows8で採用されているModern UIの大きな特徴であるボタンやフォームを超軽量の外部スタイルシートファイルと簡単なclass指定で実装できるCSS3のライブラリを紹介します。 Modern Buttons CSS3 Microsoft Modern Buttons -GitHub ※キャプチャはWindows8のModern UI Modern Buttonsの特徴 Modern Buttonsのデモ：ボタン Modern Buttonsのデモ：フォーム Modern Buttonsの特徴 Modern Buttonsは、ボタンやフォームをCSS3で美しくスタイルした軽量（5.5KB gzipped）で使いやすいCSS/JavaScriptのライブラリです。 Modern Buttons クロスブラウザ対応 IE8をはじめ、最新のChrome, Firefox
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
リスト・テーブルを極めるためのプロパティ、13連発！
contentプロパティ contentプロパティは、:before疑似要素および:after疑似要素が適用された要素の直前・直後に、文字列や画像といったコンテンツを挿入する場合に使います。 詳しくはコチラ→ content 文字列や画像などを挿入する際に使うcontentプロパティ quotesプロパティ quotesプロパティは、contentプロパティにより挿入される引用符を設定する場合に使います。 詳しくはコチラ→ quotes 引用符を設定するquotesプロパティ counter-resetプロパティ counter-resetは、要素の連番の値をリセットする場合に使います。 適用された要素が現れるたびに、指定した名前のカウンタの値が0にリセットされます。 詳しくはコチラ→ counter-reset 要素の連番の値をリセットするcounter-resetプロパティ count
「携帯ゲーム機用Webページ」の作り方
本連載では、Web標準のメリットを最大限に活かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口を紹介しています。連載第7回目となる今回は、ニンテンドーDSやプレイステーション・ポータブルなどの携帯ゲーム機向けページの作り方を紹介したいと思います。 はじめに 本連載では、Web標準のメリットを最大限に活かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口を紹介しています。 多様なデバイス向けのページ制作として、前回は携帯用ページの作り方を紹介しました。連載第7回目となる今回は、ニンテンドーDSやプレイステーション・ポータブルなどの携帯ゲーム機向けページの作り方を紹介したいと思います。 対象読者 XHTMLとCSSの基本を理解していている方。 Web標準
サンプルから学ぶCSSレイアウトとテクニック
CSS段組みレイアウト リキッドタイプ リキッドレイアウトとはウィンドウの幅に応じてページの表示幅が変化するレイアウトの事です。 ２段組 右の幅のみが変化する２段組 左の幅のみが変化する２段組 ３段組 右側の２段が変化する３段組 左側の２段が変化する３段組 ボックス幅固定タイプ 回り込みを利用した２段組 回り込みを利用した３段組 リキッドと回り込みの併用 配置を利用した２段組 配置を利用した３段組 CSSテクニック レイアウトするボックス関係のテクニック 背景をずらして影を作る 角丸ボックスを作る。【固定幅】 角丸ボックスを作る。【リキッド】 ボックスにぼかしを利用する 現在のところ、サンプルは以上です。 制作者からの一言 まず、表示が崩れている場合はすみません。できれば【Fierfox】を使用してみてください。一応ほかに、【Op
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
Web Designer - Developer - Software Engineer - Business Consultant - London
Projects can take many forms and I enjoy the challenge of both design and development. Designing simple interfaces that can integrate with complex backend infrastructures. I've spent my career in web development, working for a number of leading technology companies in the UK. I joined Myspace as one of the only developers outside the US, working on digital marketing campaigns for large consumer an
WordPressでパンくずリストを表示するシンプルなコード – creamu
WordPressでパンくずリストを使いたい。 そんなときにおすすめなのが、『How To: Breadcrumbs in WordPress』。WordPressでパンくずリストを表示するシンプルなコードです。 ネストされたカテゴリーやページにも対応しているようですね。 パンくずを表示するプラグインは、「Yoast Breadcrumbs」や「Breadcrumb NavXT」がありますが、オールドファッションなやり方で実現してみたとのこと。 使い方は、「The PHP Code」に書かれているソースを、WordPressの「functions.php」に追記することで、「<?php get_breadcrumbs(); ?>」と書いて呼び出すことができます。 CSSでのスタイリングもされているので、一度見てみてはいかがでしょうか。 How To: Breadcrumbs in Word
[CSS]ハック無しで、不透明なパネルをドロップダウンするナビゲーション
IEをはじめとするクロスブラウザ対応の不透明なスタイルを適用したドロップダウン型のナビゲーションをCSSplayから紹介します。 IE6でのキャプチャ ナビゲーションはJavaScriptやtableは使用しておらず、スタイルシートもハックや条件付きコメントは使用していません。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(Win), Chromeとのことです。 また、同様に垂直型のナビゲーションも公開されています。
stu nicholls | CSS PLaY | experiments with cascading style sheets | home page
What it's all about... "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents." The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my
jQuery、プラグイン、jQuery UI、Web経由のCDNとは
jQuery、プラグイン、jQuery UI、Web経由のCDNとは：CSSの書き方も分かるjQueryプラグイン実践活用法（1）（1/3 ページ） CSSの書き方も分かる、jQueryプラグイン紹介連載 本連載は、jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載です。jQuery/JavaScriptコードやHTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 第1回目は、基本／おさらいとしてjQueryとプラグイン、jQuery UIについて簡単に触れ、Web経由でjQueryを使うCDN（Content Delivery Network）について解説します。 これぐらい知ってますよね？ 「jQuery」基礎講座 jQueryは、米国のJohn R
Fluid 960 Grid System
Fluid 960 Grid System If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. Initially released as open source on GitHub Jan 29, 2009. Markup LibraryDesign ProcessDesign is based on the inspiration
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから学ぶ「CSS Sprite」
いまさら聞けないCSS／スタイルシート入門
ashikunep.org