最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。 これ全部、フォン... 「トップへ戻る」ボタンのデザイン15パターン ボタンで表示を切り替えてご覧ください。 See the Pen PAGE TOP BUTTON01 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON02 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON03 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON04 by kenichi (@ken81
どうも、森山のぼくです。 昨日、ちょんちょんっとヘッダー部分にメニューバーを付けてみました。 はてなブログってHTMLのカスタム性が壊滅的なのがあまりよろしくないなぁと思うのですが、 少し機転を利かせれば、結構カスタマイズできますよ～ まぁどこのブログサービスつかってもカスタマイズすごい人たくさんいますよね……へへ。 というわけで、続きから私が行ったメニューバーの作り方をご紹介!! メニューバーをWEBで簡単に作る。(けど有料！) 今回、いろいろなブログさんを見て作ったのですが 皆さん「CSS MenuMaker」を使って作ることが多い模様。 HTMLとかCSS作れないならこれでいいと思うけど、自分で作っちゃったほうが後々編集するときに便利だし簡単よ。 というか、このCSS MenuMaker。 まさかの、CSS部分は有料(たぶん) HTMLはコピっとできるんだけど、CSSのコード開こうと
シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 <div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> ギザギザを一つにした最小限のセットは、こんな感じです。 <div class="jagged-wrap-inner"> <div class="offse
ただいま準備中です MakeShop のオンラインマニュアルは下記URLをご参照ください。 http://ms-manual.makeshop.jp/
Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item. Today we want to show you how to create a simple blur effect for text-based item
タグとかめんどーだから、入れる気無かったんですけど、今更になって悪くないかも？とか思い始めたので、試しにタグクラウド設置してみました。 トップページの下の方におりますが、あんまり古いエントリーとか、タグ付け自体が適当だったりするので、あんまり使い物にならないかもしれません。。。永遠のベータ版です。 で、まぁかっこ良さげなタグクラウドを頑張ってつくろーとkiai出して作ってる途中に、ふと3ping.orgさんを思い出し、過去記事をあさってたらTag Cloudのスタイルというエントリーがありました。 んで、被ってる感じバリバリだからいっかーとか思ったんですけど、何となく作っちゃったんで公開っていう流れです。えぇ。 にしても3つほど作ったら疲れました。 ダウンロードとか実際の表示を見たい方は以下より。 サンプルの実際の画面 サンプルダウンロード(zip:17kb) スタイルシート タグクラウド
ページ全体に目盛り(方眼)画像を重ねて測るブラウザによって微妙に配置が異なっている場合や、自分の望みの位置とは微妙に異なっている気がする場合、ずれている距離を測るのは面倒です。そんなとき、ページ全体に上から目盛り(方眼)画像を重ねると便利です。 ページの上から目盛り表示を重ねる 細かなレイアウトを試してみたとき、隣接するブロック間の距離がブラウザによって異なっていたり、自分の希望するサイズとは異なって表示されたりして気になったことはありませんか？ そのとき、何ピクセルのズレがあるのかを測らないと原因が分からないこともあります。 しかし、画面上で距離や位置を測るのはなかなか面倒ですね。 そこで、ページ全体に対して、上から目盛り（方眼）画像を重ねてみましょう。 すると、ブロック間の距離や、配置されている位置（座標）の確認が容易になります。 以下に、目盛り（方眼）画像を重ねるためのサンプルボタン
新人デザイナーが最初にぶち当たる試練に、英語があったりします。 自分だけが知らないのかと思って、先輩聞けずなんとなくごまかしているうちに・・・いまさら聞けないし・・・みたいになっていませんか？。そこで今回の記事では、CSSプロパティー関連の英語で読みにくいものをピックアップしてみました。 発音をチェックできるリンクも付けてますので、実際に耳で聞いてチェックしてみてください。 1. text-align アラインです。g は発音しません。 私は昔「アリジン」と読んでいました。蟻人みたいですね。 2. margin こちらは g を発音して、マージンです。 3. width これは難しい！。d の音がほどんど聞こえないし、ネイティブでも発音が揺れるので、一概には言えないのですが、ウィドゥス、ウィトス、ウィズなどと読みます。 ただし、with と区別するために、ワイズと読んだりもします。 4.
JavaScript で IE アクセス時のみブルースクリーンで警告を表示する tm.destroyie6.js を作ってみました. IE6 を一緒に撲滅しませんか？ このスクリプトを使えば簡単に IE6 でアクセスした時のみ下の画像のような警告を出し, 他のブラウザのインストールを促します. ちなみに, デザインは開発者用に配布された Windows 8 のブルースクリーンを真似てます. Microsoft が作ったブラウザでアクセスした際に, Microsoft がデザインしたブルースクリーンで警告を出す. ん～皮肉感たっぷりなスクリプトですw DATA and DEMO いくつかデモを用意しました. IE 警告の他にも, 本家ブルースクリーンのコピーや誕生日メッセージも作ってみました. Demo Download USAGE 使い方について FLOW 流れ tm.destroyie6
使うかどうか分からないけど、慣れた ら楽かも、と思ったのでテスト的に 使っています。サーバー側にCSSの更新 があったら読み込みなおして最新の状 態にしてくれる、というブックマーク レット、SoFreshです。 cssrefreshに影響されて作ったそうです。cssrefreshのようにJSは配布されていませんが、CSSのファイル単位で、というのはいいかもしれない。 CSSの更新を反映してくれるブックマークレット。F5連打してる方は試してみては如何でしょうか。 ブックマークレットを起動すると上記のようなボックスが表示されます。そのページで読み込んでいるCSSを羅列してくれるので、更新を反映させたいファイルにチェックを入れればOKです。 cssrefreshもブックマークレットあるのでお好みでいいと思います。土曜日なので軽めの話題で失礼しました。 SoFresh
3連休を如何お過ごしでしょうか。さて、 ちょっと面白いものを見かけたのでシェア します。Masonryのようなレンガ風の レイアウトをCSSのみでサクッと作れる Webサービス。パズルのように組み合わせ るので種類は900パターン近くになる そうですよ。 休日なので軽めの話題でも。 よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと面白いなぁと。jsも使わないし、直感で作れるのでお手軽といえばお手軽じゃないですかね。 このようにパズルのようになっていて、右のエレメントをドラッグし、左にドロップしてボックスを配置する、というもの。jsは使われず、CSSのみで作れます。 操作は直感で出来ると思います。 作ったらコードを発行してもらえます。 Example 960pxで作成されますので汎用的ではありませんが、これはこれで面白いかな
面白かったのでご紹介。マウスホバーによるロールオーバーエフェクトをcssで3D表現したサンプルです。休日ですし、ちょっとネタ的な内容ですけど、これはこれで勉強になりました。いろいろと考えますね、ほんと・・ 例によってブラウザは限られてしまうんですが、良い感じの3Dエフェクトでした。 3D CSS rollovers マウスを乗せると縦とか横に回転します。 見ないとピンと来ないですよねという事でサンプルです。cssのみで動作しています。Chrome推奨。下にスクロールすれば何点かデモがあります。 Sample translate3dとかperspective この3D化にはtranslate3dというCSS3が使用されています。 極めていい加減な画像ですがX、Y、Z軸はこうなっています。 .box .front { -webkit-transform: translate3d(0,0,200
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
結構前からあるみたいですけど、なかなか 良かったのでメモがてらご紹介。軽量で シンプルなCSSフレームワークです。有名 なフレームワークは使いやすく、高性能 な傾向ですが、結局無駄が出てしまうので 場合によってはこういうシンプルなもの が役に立ったります。 ちょっと触って良さそうだったので忘れないように、みたいな記事です。軽量なCSSフレームワークで、中身もシンプルだったので好みでした。最近はレスポンシブ対応ばかり目に行ってるので、こういうのも試しておきたいです。あんまり時間無いですけど・・ 一応HTML5にも対応してました。タイポグラフィに目を向けたCSSフレームワークで、罫線に沿ったテキストコンテンツを実装出来ます。 一応触ってみましたけど、結構悪くなかったです。個人的な感想ですけどｗ 柔軟性を考慮したCSSフレームワークは便利なんですけど、理解するのが面倒なので僕程度ならこれくらいで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く