CSSに関するJ-Dogのブックマーク (14)

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    J-Dog
    J-Dog 2012/08/20
  • 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」

    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レイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
  • CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め

    CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの?というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない

    J-Dog
    J-Dog 2011/04/22
    tableのセルの中、改行についてのあれこれ
  • モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ

    モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作

    モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
  • CSS For Bar Graphs

    Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side. Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought

    J-Dog
    J-Dog 2011/01/25
    CSSでグラフを描く方法
  • [CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集

    CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系(Chrome, Safari)のみとなっています。 Letterpress(レタープレス) Small Caps(スモールキャピタル) CSS Coupon(クーポン券) Stitched(ステッチ) Gloss(グロス) Stroked Text & @font-face(@font-faceを使ったストローク) Double Stroked Text(二重のストローク) Letterpress(レタープレス) レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha

    J-Dog
    J-Dog 2010/10/26
  • CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記

    CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
    J-Dog
    J-Dog 2010/07/13
    これは、行間設定ですわ。1.4はモニタで文章を読むときに、人間が一番読みやすいと言われている行間設定です。
  • Hints of fonts on the web -- Introduction

    Section 1:概説 Section 2:画像化テキスト Section 3:サンセリフ欧文(1) Section 4:サンセリフ欧文(2) Section 5:サンセリフ欧文(3) Section 6:セリフ欧文(1) Section 7:セリフ欧文(2) Section 8:セリフ欧文(3) Section 9:草書系・筆書系欧文(1) Section 10:草書系・筆書系欧文(2)・装飾系欧文 Section 11:等幅欧文・その他の欧文 Section 12:ゴシック系和文(1) Section 13:ゴシック系和文(2) Section 14:明朝系和文(1) Section 15:明朝系和文(2) Section 16:その他の和文 Appendix A:無償利用できるフォント Appendix B:Windows の標準フォント Appendix C:PostScript

    J-Dog
    J-Dog 2010/06/16
  • Font Preview - Google Font Directory

    Back to font list Font previewer This is some example text. You can edit it. You can also modify it with the controls below. When you're done simply copy the code for your own site. Font family : Lobster Designer: Pablo Impallari

  • CSS解説 -疑似クラスと疑似要素-

    a:hover{color: blue; text-decoration: underline} 補足 擬似クラスは文脈セレクタと組み合わせて使用することができます。 em a:link{color: green} また、通常のクラスと組み合わせることもできます。この時、通常のクラスを先に、擬似クラスを後に書かなければなりません。 a.external:visited{color: silver} <a class="external" href="http://foo.hoge/">お勧めリンク</a> 上の例のようなリンクをあなたが既に閲覧済みであれば、このリンクは薄い灰色で表示されることになります。 擬似要素(Pseudo-elements) first-line擬似要素(The 'first-line' pseudo-element) その名の通り、最初の一行だけに指定したスタイル

    J-Dog
    J-Dog 2010/05/20
    :focus キーボード等によってフォーカスが与えられている要素
  • CSSの:checked擬似クラス - Webtech Walker

    ラジオボタンがチェックされたときにCSSプロパティを指定するための:checked擬似クラスがあります。 実用的な使用方法は下記の例のように、ボタンがチェックされたら、対応するテキストが装飾される。といった感じです。FireFoxとOperaでは動作確認しましたが、IE6、IE7では動きません。 サンプル 隣接セレクタを使って、:checkedの隣のlabelにスタイルを指定しています。ソースはこんな感じ。 <div id="radioBox"> <input type="radio" name="text" value="1" id="radio1" /><label for="radio1">リスト1</label><br /> <input type="radio" name="text" value="2" id="radio2" /><label for="radio2">リスト

    CSSの:checked擬似クラス - Webtech Walker
    J-Dog
    J-Dog 2010/05/20
  • 少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

    少しのコードで実装可能な20のCSS小技集
    J-Dog
    J-Dog 2010/04/15
  • Firefox 3.5のCSS新対応:text-shadow、-moz-box-shadow、-moz-border-image、-moz-column-rule - builder by ZDNet Japan

    大事なのは”仕事の段取り” 幅広い業務を任されているからこそできる ひとり情シス流の業務改善術 50年の経験を持つアイネットが提供 ユーザー企業の使いやすさを第一に考えた ワンストップで使えるマネージドクラウド 注目急上昇中のDaaS最新情報 コロナ禍を背景に利用者と機能を拡大中 Azure Virtual Desktop最新情報 全世界22万以上の企業・組織で採用 DX時代の顧客価値創出に大きな役割を担う CI/CD環境の現実解を紐解く データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある DNSを守り、DNSで守る 高度・巧妙化し危険度を増すサイバーリスク いま考えるべきモダンセキュリティのあり方 今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 コマース広告の大変動

    Firefox 3.5のCSS新対応:text-shadow、-moz-box-shadow、-moz-border-image、-moz-column-rule - builder by ZDNet Japan
    J-Dog
    J-Dog 2010/03/18
    文字に影をつける text-shadow、ボックスに影をつける -moz-box-shadow
  • 閲覧者がスタイルシートを切り替えられる機能を作る [ホームページ作成] All About

    現在のページで読み込んでいるCSS(スタイルシート)ファイルを、閲覧者がプルダウンメニューを使って(CSSファイルごと)切り替えられる機能を作ってみましょう。 CSSファイルそのものを動的に変更できる(置き換えられる)ので、ページの装飾やレイアウトを大きく変えられます。 複数のページデザインを用意しておいて、閲覧者が自身の好みに応じて切り替えられるようにしたり、画像素材配布サイトなどで、どのようなページデザインのときに素材がどのように見えるのかを確認させたい場合などに活用できるでしょう。 CSSファイルを動的に切り替えられる機能の例 下記のプルダウンメニューを変更すると、読み込まれているCSSファイルが変更され、ボックス内の装飾が変化します。試しに変更してみて下さい。 ※JavaScriptが有効な場合のみ動作します。 ※CSSファイルが新たに読み込まれるまで、数瞬の待ち時間がある場合があ

    閲覧者がスタイルシートを切り替えられる機能を作る [ホームページ作成] All About
    J-Dog
    J-Dog 2010/03/09
    link要素をdocument.getElementByIdでid属性を指定して呼び出し、link要素のhref属性を書き換える
  • 1