crossline

▼PlugIn-Tabs-

font-size:12px;line-height: 150%;

 

 

 

 

■tabをPlugIn!!■

 

 

Tabs | jQuery UI

 

 

▼上記のリンクからダウンロードをします。

このままだとすべてダウンロードされてしまうので、

f:id:ishuko:20140621003059p:plain

↓allのチェックをはずします

 

f:id:ishuko:20140621003146p:plain

 

↓必要なものだけにチェックをつけます

 

f:id:ishuko:20140621003239p:plain

f:id:ishuko:20140621003247p:plain

 

ファイルを開くと、下の写真のようになっています

HTML、CSSを選び、開きます

 

 

f:id:ishuko:20140621002546p:plain

 

開くとお気づきになるかもしれませんが、ものすごくながいですw!!

すこし、余計なのもをけずります!

CSSでは、

f:id:ishuko:20140621003728p:plain

をすべて!

 

HTMLでは、

f:id:ishuko:20140621004000p:plain

bodyをここまで削ります。

 

これで少しみじかくなったはず。

 

ブラウザ上での表示は下記のようになりました

 

f:id:ishuko:20140621004111p:plain

 

あとは、cssをいじっていくだけです!

こんなにもシンプルにできてしまうんですね!

 

 

 

 

▼自分なりにいじってみた結果です

f:id:ishuko:20140621010743p:plain

 

CSS:widthを指定

f:id:ishuko:20140621010835p:plain

文字の部分に、<p>で<img>と文書。

HTMLの<style>内に、直接float,overflowの記述する。

 

以上!こんなに簡単にできてしまう!たくさん使えますね★

 

 

 

 

ほかに、色や、画像を自分で作っても面白そうです!