ウェブ学のすすめ

Study of Web Design & Programing

CSS

iOS 7のロゴをCSSで表現してみた(borderにグラデーションをかける方法)

CSS

jsdo.itでiOS 7のロゴをCSSで表現してみました。iOS7という作品をforkしてグラデーションなどを加えています。borderにはグラデーションをかけることができないため、paddingを用いて線を表現してみました。

CSSの行数が少なくなる!?OOCSSを始めてみよう

CSS

中~大規模のサイトを制作するとCSSが半端なく長くなることが多々あります。こんなときCSSの行数を減らすことができるのがOOCSSというスタイルシートの考え方です。行数が少なくなるほかにもいろいろ便利な面があります。

JavaScript for Twitter Bootstrapの使い方

CSS

Twitter Bootstrapを使って新しいサイトを制作しようと思い、今回は動きの部分のデモを作ってみました。Twitter Bootstrapを使えばjavascriptを多く書かなくても多彩な動きを表現することができます。

Twitter Bootstrapのサンプル盛り合わせ

CSS

Twitter社が作ったCSSフレームワーク「Bootstrap」をいろいろ試してみました。用意されたCSSを指定してあげれば簡単にPCサイト、スマートフォンサイトに可変で対応するレスポンシブデザインを構築することができます。

CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版)

先日作成した「CSS3メディアクエリを使った固定レイアウト - ウェブ学のすすめ」のメニューをコンパクトにしたバーションです。CSS3のtransitionとtargetを使用し、メニューを折りたたみタップすることで内容が見えるようになっています。※現在はIE対策をし…

可変レイアウトデモサイト「PICKUP STREAM」

CSS

CSS3のメディアクエリを使用して可変レイアウトのデモサイトを作りました。外部スタイルシートに記述するのではなく、スタイルシートの中に@media規則でメディアクエリを記述してします。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利い…

CSS3 animation transformの動きデモ

CSS

要素を変化させるtransformの実際の動き方を見るためにデモを作ってみました。プレビュー ↓別ウィンドウを開いて見る CSS3 animation transformの動きデモ - js do it ポイント transform 値内容scale拡大・縮小rotate回転translate距離skew歪み animationの…

CSS3のtransition-timing-function動きデモ

CSS

CSS3のtransitionやanimationでアニメーションの動きを指定するtiming-functionの実際の動き方を見るためにデモを作ってみました。プレビュー ↓別ウィンドウを開いて見る transition-timing-functionの動きデモ - js do it コード HTML <div id="transition"> <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out"></div></div>…

画像を使わずにCSS3だけで描いた将棋の駒

CSS

HTMLとCSS3を使って将棋の駒を描いてみました。プレビュー ↓別ウィンドウを開いて見る CSS3で描いた将棋の駒 - js do it コード HTML <div id="wrapper"> <div id="ou"> <div class="kaku1"></div> <div class="kaku2"></div> <div class="kaku3"></div> <div class="kaku4"></div> </div> <div id="shou"> <div class="kaku1"></div> <div class="kaku2"></div> </div></div>

JavaScriptでCSSを切り替える「styleswitch.js」

サイトに訪れたユーザーがページ上で簡単にスタイルシートを切り替えることができる方法を調べてみました。 いくつか方法がありましたが「styleswitch.js」で切り替える方法をご紹介します。 ↓別ウィンドウを開いてみる JavaScriptでCSSを切り替える「styles…

jQueryMobileのCSSをフルカスタマイズする

jQueryMobileの解説記事「ASCII.jp:西畑一馬のjQuery Mobileデザイン入門」を参考にjQueryMobileのCSSをフルカスタマイズしてみました。記事内で作られたサンプルサイトと読み込むjQuery、jQueryMobileのバージョンを変更しています。バージョンが異なると…

CSSだけでポップアップ画像を表示する方法

CSS

プレビュー ↓別ウィンドウを開いて見る CSSだけでポップアップ画像を表示するポイント ポップアップする画像は幅、高さ1pxにしておく ホバーしたときにポップアップする画像の大きさを指定しておく CSS3のアニメーションを追加してみました。 a:hover { -web…

IE8以下でもCSS3 Media Queriesが使える「respond.js」を試す

CSS

IE8以下でもCSS3 Media Queriesが使えるようになるスクリプトとして主に「css3-mediaqueries-js」と「Respond.js」があります。今回はRespond.jsが動作するか試してみました。 Respond.js導入のポイント cssファイルはエンベッドしない。 cssファイルはHTML…

可変グリッドレイアウト+ Lazy Load

昨日、divを使ってグリッドレイアウトを作りましたが(グリッドレイアウト(divバージョン) - ウェブ学のすすめ)、今度はarticleやsectionを使って書き直してみました。書き直すと同時に以下の機能を追加してみました。 スクロールするごとに画像を読み込…

CSS3を使ったアコーディオンパネル

CSS

プレビュー ↓スマートフォンの方はこちらからプレビューできます。 CSS3を使ったアコーディオンパネル - js do it ポイント transition: transitionを適用するプロパティ 時間 変化の具合; コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>垂直タイプのアコーディオン式メニュー</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>

Apple風メニューバーの作り方(CSS3版)

CSS

プレビュー PC版 Apple風メニューバー - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 Apple風メニューバー - js do it コード HTML <div id="wrapper"> <nav> <ul id="appleNav"> <li><a href="#"><img src="http://jsrun.it/assets/5/q/n/W/5qnWX.png" alt="Apple Logo"></a></li> <li><a href="#" class="current">ストア</a></li> <li></li></ul></nav></div>

Apple風メニューバーの作り方(CSS Sprite版)

CSS

プレビュー PC版 Apple風メニューバー(CSS Sprite版) - jsdo.it - share JavaScript, HTML5 and CSS スマートフォン版 Apple風メニューバー(CSS Sprite版) - js do it コード HTML <div id="globalheader" class="nav02"> <ul id="globalnav"> <li id="nav01"><a href="#">Apple</a></li> <li id="nav02"><a href="#">Store</a></li> <li id="nav03"></li></ul></div>

MSN風縦型サブメニュー の作り方

CSS

Twitterのフォロワーの方に「MSNサブメニューバーの飛び出す表示の入力タグをご存知でしたら教えて下さい。」とご相談されたので実際に作ってみました。参考になれば幸いです。(MSN Japan)加筆:第3階層目を追加&グラデーションを試してみました(2012/06/…

サイト構築〜HTML&CSSの仕上げ〜|Wants Cake

CSS

Wants Cake 長い記事になったので目次を付けてみました。 目次 リンクをクリックすると記事内の指定箇所に移動できます。 HTML index.html products.html item.html order.html shop.html CSS base.css style.css index.html ↓画像をクリックすると作成した…

横ナビゲーションの作り方

CSS

横ナビゲーションを復習してみました。 「nav1」display:inlineを利用した横ナビ。hover時の文字色を指定。 「nav2」float:leftを利用した横ナビ。hover時の背景色を指定。 「nav3」float:leftを利用した横ナビ。hover時の背景色を指定。 「nav4」float:left…

header部のレイアウト(2)

CSS

課題 container幅:800px 引用元:復習:header - Webデザインの勉強|忘筌 解答 forked: header部のレイアウト(2) - jsdo.it - share JavaScript, HTML5 and CSS HTML <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style2.css" type="text/css" media="screen,print"> <title>Information World</link></meta></head></html>

header部のレイアウト(1)

CSS

課題 container幅:800px 引用元:復習:header - Webデザインの勉強|忘筌 解答 header部のレイアウト(1) - jsdo.it - share JavaScript, HTML5 and CSS HTML <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css" media="screen,print"> <title>header(1)</title> </head> <body> …</body></html>

ベーシックな企業サイトの作り方

CSS

ポイント HTML5ではContent-Style-Typeは記述しなくてもよい CSSが長くなったら外部ファイルとして読み込むようにする 矢印などの意味のない画像はCSSで背景として指定する contentの背景を表示させるために1px余分に幅を確保する img要素に対してwidth、hei…

positionを使ったレイアウト

CSS

ポイント 配置したいものがabsolute それを囲むものがrelative positionを使ったレイアウト例 positionを使ったレイアウト - jsdo.it - share JavaScript, HTML5 and CSS

floatを使ったレイアウトver2

CSS

floatを使ったレイアウト - ウェブ学のすすめで書いたHTMLを授業で習ったことを踏まえてもう一度書き直してみました。 解答ver2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>

floatを使ったレイアウト

CSS

課題 引用元:確認テスト05/14 - Webデザインの勉強|忘筌 解答 floatを使ったレイアウト - jsdo.it - share JavaScript, HTML5 and CSS

実践課題【CSS11】 銀座 夏野

CSS

課題 【CSS11】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで 記述場所はエンベッド XHTML 1.0 Transitional テキスト無し(すべて画像で、代替文字は空) 引用元:CSS10〜11 float - Webデザインの勉強|忘筌 解答 実践…

実践課題【CSS10】 おいしい卵料理レストラン Cockyolly

CSS

課題 【CSS10】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで 記述場所はエンベッド XHTML 1.0 Transitional 背景画像は作成する(アプリケーションは自由選択) メニューは擬似クラスで指定 引用元:CSS10〜11 float - W…

実践課題【CSS09】 ガラスの靴の持ち主を探しています!

CSS

課題 【CSS09】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド フォームボタンを設定(できなければ、段落内に画像2つ) 引用元:CSS08〜09 - Webデザインの勉強|忘筌 解答…

実践課題【CSS08】 石垣島観光ガイド

CSS

課題 【CSS08】 以下の画像と同じように表示させるCSSを記述しなさい リセットは、全称セレクタで XHTML 1.0 Transitional 記述場所はエンベッド 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で…