hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
