CSS
BootstrapのGlyphiconが正常に表示されなかった場合の対処法
2018/02/26 CSS
先日、CSSのフレームワーク「Bootstrap」で多数のアイコンが利用できるGlyphiconがありますが、このアイコンで文字化けというか、四角い文字になってしまう問題が発生しました。 原因はフォントのパスが変わったこ …
HTMLとCSSだけでGAME BOYをアニメーション化！
その昔、流行ったゲーム機として「GAME BOY」という物がありました。今でいうニンテンドー3DSの先祖のようなゲーム機です。 ゲーム機の内容ではないのですが、そんなGAME BOYをHTMLとCSSだけで表示すると …
CSS3でフォントを作成「CSS SANS」
2015/03/19 CSS
スタイルシートのバージョン「CSS3」が出てから本当にいろいろなデザインができるようになったと思います。最近ではスタイルシートで吹き出しなどの絵やアイコンを作ることもできるのですが、ついに文字（フォント）まで作った人が …
HTML5＆CSS3のブラウザ対応状況をまとめたサイト
HTML5やCSS3を使っていると 「このタグ（CSS）は○○ブラウザで正常に表示されるのかな？」 と、思うことがあります。理由はHTML5とCSS3は新しい技術なのでブラウザが対応していない場合があるからです。 下 …
1つのDIVタグでマリオが無限に動くアニメーション
2013/12/05 CSSJavaScript
最近のCSSやJavaScriptの技術はすごいものです。ちょっと前までは考えられない様なサイトが多数存在します。 そんな中、またすごいサイトがありました。それはHTMLのメインタグは <div class=& …
ロンドンの地下鉄図をCSS3、HTML5、JavaScriptで書いた図
2013/05/31 CSSHTMLJavaScript
新しくできたCSS3はいろいろなことができるようになり、私も以前にCSSで棒人間なるものを書いてみました。 そんなCSS3とHTML5、JavaScriptを使って2013年5月のロンドンの地下鉄図を書いたサイトがあ …
CSS3だけでけいおんのキャラクタを
2011/12/20 CSS
よく、ネット上で「けいおん」というアニメの話題が上がっていたりしますが、おじさんにはさっぱりわかりません(^^ゞ そんなアニメはどうでもいいのですが、Web上でそのけいおんのキャラクタをCSS3だけで書いてある情報が …
CSS3で書いた3Dの文字列
2011/09/16 CSS
ちょっと前までWeb上で上記のような立体文字(3D)を出そうとする場合はPhotoshopなどの画像ソフトを使って絵として作り込んでいたのですが、最近話題のCSS3を使うと、上記のような立体画像を文字として作ることができ …
画像を使わずにCSS3だけで84個のアイコンを表現
2010/12/01 CSS
以前、CSS3で棒人間を書いてみるという記事を書きました。これはCSS3の新機能であるドロップシャドウや角丸を利用することでこんなことができるということで紹介させて頂きました。 今日はそのCSS3を利用することでWe …
CSS3で棒人間を書いてみる
2010/05/18 CSS
最近、Web会では新しい規格のCSS3の話題が日々どこかで書かれています。CSS3では今まで出来なかったグラデーションやドロップシャドウ、角丸などを実現することができ、Webのデザインが大きく変わる画期的な(？)規格で …
新しいHTMLとCSSのブラウザ対応状況
Webページを作る上でHTMLは必ず必要でCSSを使用することも普通と言っていいでしょう。このHTMLとCSSにはバージョンが存在していて、HTMLに関してはHTML4系が最新で、CSSに関してはCSS2系が最新です。 …
