cssで指定幅以上の文字を切り取り、末尾に「...」をつける

CSS

参考リンク → http://monopocket.jp/blog/css/2866/指定の要素のスタイルに例えばp要素であれば p{ width: 200px; margin: 0 auto; //以下３つのcssを適用する text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } これで、幅200px以上の分…

2013-09-20

単純に画像のスライドを無限にループさせる

CSS

スライドさせたい画像を一枚の横長の画像にします。これを、cssで背景画像に指定し、css3のanimationで画像の横幅分、スライドさせるように指定するし、infiniteの指定をすると、無限にループしてスライドできます！画像のクローンを作って、繋げてとかい…

2013-09-18

animationを使った簡単なスライドショー

CSS

とても簡単だったのでメモ今回はchrome向けのみのコードですので他のブラウザの場合はベンダープレフィックスを付けてください。デモ｜http://yuto-m.sakura.ne.jp/admin/assignment/css/animation_slideshow/index.htmlHTML <div id="slideshow"></div> CSS #slideshow{ width: 800p…

2013-08-23

Tabs Effect

JS CSS

jQueryとCSS3を使って、エフェクトのあるタブを作りました！アップロードしてあります→http://yuto-m.sakura.ne.jp/admin/assignment/js/tabs_effect/index.htmlHTML <html lang="ja"> <head> <meta charset="utf-8"> <title>Tabs Effect</title> <link rel="stylesheet" href="common.css"> </link></meta></head></html>

2013-08-13

Transform/Transtion

CSS

以前見たこちらのサイト[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリスを見て、マネをしてみました。これぐらいなら簡単に出来ますね！アップロードしてあります→http://yuto-m.sakura.ne.jp/admin/assignment…

2013-07-20

あめやえいたろうのサイトのレイアウトを作ってみた

HTML CSS

CSSでのレイアウト作りには慣れが必要だと思ったので、センスいいなーと思ったサイトの一つである、あめやえいたろうのサイトのレイアウトを練習台に作ってみました。本家のデザインレイアウトだけ真似て作ったもの以下、コードになります。HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>copy</title> <link rel="stylesheet" href="css/style.css" media="all"> </head></html>…

2013-07-12

CSS Spriteでページ読み込み速度を速くする

CSS

以前からCSS Spriteについて知ってはいましたが、実際に使ったことはまだなく今日授業で習ったので、この際忘れないようメモしたいと思います。 CSS Spriteとは？ htmlのimgタグで画像を読み込むと画像の枚数だけ、表示速度が遅くなります。ですが、複数の画…

2013-07-11

floatした要素の高さを合わせる

CSS

要素に高さを指定していれば、高さが合わないということは起きにくいと思いますが、実際は高さは可変にしていると思うのでfloatした際、高さが合わなくなってしまします。例えば、以下の様な場合です。実際はcontainerの中の要素をfloatして、高さはmainの…

2013-07-10

再「font-family」について

CSS

先日紹介した「font-family」の指定方法はあまり適していないということなので、授業で習った指定の仕方を紹介します。通常の場合特に指定が無いのであれば、以下で十分です。 font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 明朝体指定の…