以前はimg要素で外部リンク用の画像を挿入していた。Awesomeのfa-external-linkアイコンを簡単に挿入できる。"";}CSSPosted@Style17:39Twitterウィジェットを可変レイアウトにする(2014年5月)2014年5月8日Twitterウィジェットを可変レイアウトにするために以下のCSSを指定していた。100%;}本日(2014年5月8日)確認したら可変レイアウトではなくなっていた。そこで!importantを使って順位を上げてみた。!important;}うまくいきました。可変レイアウトのTwitterウィジェットTwitterPosted@Style17:09コード置き場の覚書やサンプルをGistに移行しました2014年1月23日Code@Styleに置いていた覚書やサンプルのコードをGistに移しました。Gistこれに伴いCode@Styleは閉鎖したしました。ありがとうございました。3では画面サイズによって表示・非表示を指定するためのclass属性値が用意されてる。Awesomeはi要素を追加しますが、CSSのcontentプロパティに記述することでHTMLを変更することなく使用できます。FONTSライセンスも「フリー」と謳われており、Webフォントとしても利用できる。WARRANTY.これらのフォントはフリー(自由な)ソフトウエアです。することができますが、全て無保証とさせていただきます。いうことなので、早速使ってみた。http://mplus-fonts.sourceforge.jp/webfonts/からお好みのフォントをダウンロード。今回はフラットデザインでの利用なので細めのmplus-1p-light.ttfを選んでみた。インターネットエクスプローラー用に.eotも必要なのだが、これは以下のサイトで変換して作成する。.eot】ボタンをクリックするだけで完了する。後は、フォントを適当なディレクトリに放り込みCSSに以下を追加記述する。format("truetype")}注意:Firefoxなどで適用できないこともあるので、必ずIE用の.eotを先に記述します。Typeのリッチテキストエディタにbootstrap.cssとカスタマイズ用CSSを適用させる2013年8月22日サイトをMTOSで構築することになった。サイトオーナー自身で更新作業になるため、なるべく簡単に出来るようAnotherCustomFieldsプラグインを使おうかとも思ったけれども、MT標準の「定型文」を使うことにした。リッチテキストエディタにはオリジナルのスタイルシートを適用できるので、以下のようにリッチテキスト用のrich-text.cssを設定。読み込ませるスタイルシートは1つしか設定できないので、Bootstrapなどを利用する場合にやりにくい。そこでrich-text.cssに@importでbootstrap.min.cssとカスタマイズ用のcustom.cssの2つを読みこませる。コメントフォームがゴチャゴチャしてるので、スッキリさせてみた。Packを使ってみた。Managerにインストールする。Fireworksで簡単なボタンを作ってみるこんな感じ。propertiesパネルを表示する。ボタンを選択した状態で更新ボタンをクリック。0)";あとはクラスなんかを付けてブラウザで確認。1070と1071のサイドバーにはCSS3のRGBaプロパティとborder-radiusプロパティを使用しています。Serviceのチェックが少し厳しくなっていた。Typeのデフォルトテンプレートでは、画像を左右に配置する際のmt-image-leftやmt-image-rightなどのクラスにfloatが使われている。以下のような対応を行う。1.3.10を利用してフィードを読んでいる。インポート・エクスポートも可能なので重宝するのだが、長文の場合に段組では読みにくい。以前からスタイルシートをカスタマイズして文字を大きくしていたのだが、今日は中途半端に時間が余ったので、ちょこっといじってみた。まとめサイトCSSFirefoxPosted@Style00:27行儀の良いコメントフォーム2007年2月23日MovableTypeのコメントフォーム周りをちょこっとカスタマイズ。stylesheet.tmplを編集することによってlabel要素とinput要素を行儀良く横並びにしてみる。individual_entry_archive.tmplのlabel要素とinput要素の関係は以下の様になっている。/></p>デフォルトのスタイルシートではlabel要素をブロックに変更してある。チェックするのに使うことができます。サーブレットとして使ったりできます。Validatorの表示が変だな?」と思っていたんですが、先程、リニューアルが完了したみたいです。リニューアルでチェックが甘くなっているようです。昨年の秋に変更があった際、文字色と背景色を共に指定してない場合には警告が出るようになりましたが、今回のリニューアルでは元に戻されています。Strictで記述し、基本的にStandard(標準準拠)モードで表示する。beta2においても、Quirks(下位互換)モードで表示すると古いバージョンと同じ表示になってしまうため、注意が必要だ。beta2」と略している。7に於けるCSS実装を検証している記事だ。7でもapplication/xhtml+xmlをサポートしないのだろうか。スキルアップ・デザインブック2006年1月22日なぜ、私の手元にあるかというと・・・(Web標準に興味がある方には、おおよその見当が付くと思いますが、)今日、ある企業の社長とお会いした。私のサイトもご覧になっていたようで、恥ずかしい限りですが、Web2.0のことから経営やマネジメント・Blogの書き方まで、普段はとても聞けないだろうと思われるような貴重なお話。いつも拝見しているBlogで想像していた通りの、とても気さくで、気取らない方でした。ありがとうございました。正覚寺】を「CSSを使用したサイト」として紹介記事が掲載されました。11月、雑誌社より掲載の依頼があり、副住職様より掲載の許可をいただきました。デザインだけでなく機能の向上にも役立つCSS福岡県大牟田市にあるお寺「正覚寺」のサイトでは、CSSで細かく文字間のバランスを指定し、見やすさ、読みやすさを考慮して作成されています。ブラウザで文字の大きさを指定してもレイアウトが崩れませんので、是非試してみてください。デザイン性の向上、管理のしやすさに加え、CSSを使用するメリットとしてもうひとつ、アクセシビリティというものがあります。アクセシビリティとは、「Webサイトの利用のしやすさ」という意味に加え、「障害を持つ人にとっての、Webサイトの利用しやすさ」という意味も含まれます。HTMLからデザインのためのコードを省くことができるため、目の見えない方が使用する音声読み上げブラウザの認識率の向上にも、CSSが役に立つことを覚えておきましょう。Web標準BlogIEBlogは本日付で開発者に対し、IE7のStrict(厳格)モードにおいて機能しなくなるCSSハックの数々を「一掃する」呼びかけを掲載しました。IE開発チームを手助けすることに興味があろうとなかろうと、次のことを考えてみてください。ソースコードのレビューは、悪いCSSハックの代わりに良いCSSハックを使うことのできる箇所を見極めるうえで、役立つかもしれません。以下の場合においても、レビュー(そしていくつかのドキュメントも?)は、あなたを助けるかもしれません。details.このハッキングを推奨しない、IE7の差し迫っているリリースのため使用するべきではありません。詳細のための公式のIEブロッグを見てください。ページ幅を固定していた頃のスタイルシートはMovableTypeのbase-weblog.cssにも使用されているStarHtmlHack等色々なCSSハックを使用していましたが、現在のリキッドレイアウトでは、CSSハックは不要となり削除しました。XHTMLコードもdivの多用を避け、シンプルに!CSSIEXHTMLPosted@Style10:34display:noneと検索エンジンスパム2005年10月7日display:noneは検索エンジンスパムであるという俗説があります。スタイルシートにdisplay:noneを記述したためにインデックスから削除されたという事実もあまり聞きません。Yahooで当サイトのCSSを検索してみると結果に現れました。ちなみにGoogleではインデックスされていないようです。インデックスされてるから削除の対象になるというものでもなさそうです。当サイトもGUIとナビゲーションを両立させるためにdisplay:noneを多用しているので、今後のYahooの動向には十分注意する必要がありそうです。Creatoをよく見に行く。そのサイドバーに本日のブラウザ統計が表示されている。Firefoxが好調とはいえ、IEの倍近く。IEが90%以上のシェアを誇っているのに、この数字があらわすものは・・・CSSでテンプレートを作る場合には、まずFirefoxで確認し、IEでちゃんと表示できるように修正。一時期のネットスケープとは逆転した状態です。バグだらけのIEは使い物になりません。CSSFirefoxIEXHTMLPosted@Style22:04ナビゲーションバーを作ろう!2005年6月4日CSSを使ってブログとウェブサイトにナビゲーションバーを作ろう!bannerやheaderの後にナビゲーションのクラスやIDを作りリストで指定します。developersに迷ってしまうほどたくさんのリストナビゲーションが紹介されています。International。