CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout全部英語ですが、CSSを使ったレイアウトのテクニックがしっかり学べるコンテンツを紹介します。 Learn CSS Layout コンテンツは最新のモダンブラウザでご覧ください。 以下、簡単な説明を添え
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
[CSS]タイプライターのように一文字ずつアニメーションで表示するスタイルシート
JavaScriptは使用しないで、CSS3アニメーションでタイプライターのように一文字ずつ表示するスタイルシートを紹介します。 デモページ 実装 両デモの実装方法を紹介します。 HTML HTMLは共通で、h1要素でテキストを実装するだけです。 <h1>Typing animation by Lea Verou.</h1> CSS:モダンブラウザ対応版 CSS3のsteps()を使用して一文字ずつ順番に表示します。 フォントはアニメーションのタイミングを同じにするため等幅（monospaceなど）で。 Pure CSS3 typing animation with steps() @-webkit-keyframes typing { from { width: 0 } to { width:16.3em } } @-moz-keyframes typing { from { width
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」:phpspot開発日誌
