[B! css] shinlinsuiのブックマーク

shinlinsui id:shinlinsui

cssに関するshinlinsuiのブックマーク (6)

float：CSSプロパティの使い方とサンプルコード集 - ウェブランサー
floatプロパティの説明 floatは、要素を浮動状態にして右寄せ、または左寄せで配置します。浮動状態になった要素は、通常のウェブページのレンダリングのフローから外れます。しかし、positionによる絶対位置指定とは異なり、フローの一部であり続けます。通常のフローであれば、ブロック要素は書字方向の交差軸に重なります。英語や横書きの日本語であれば、文字は左から右へ流れ、ブロック要素が閉じられると上から下に向かって重なります。つまり、floatで通常のフローから外れると、この文法を無視して包含ボックスの右や左の辺に寄せて配置されるのです。浮動要素と同じ階層に配置された通常フローの要素は、右や左に寄せられた浮動要素に回り込むように配置されます。ここに適切な余白を指定しておくと、カラムレイアウトを作成しなくとも、ブロック要素を横に並べることができます。浮動要素は、しばしば意図しない要素の
shinlinsui 2016/08/17
css
リンク
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！目次画像を丸く表示 1本線のテーブル 1本線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズ Webフォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット線のオフセット設定 HTML・CSSの全
shinlinsui 2016/02/02
css
リンク
少しのコードで実装可能な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
shinlinsui 2016/02/02
css
リンク
https://www.ituore.com/entry/html-css-basic
shinlinsui 2016/01/07
css

HTML
リンク
CSSビギナーに気をつけてほしい5つのポイント | コリス
スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用するビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS 本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex
shinlinsui 2011/03/26
css

tips

web
リンク
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避けるリスト要素の使用画像とキャプションの使用複数の見出しとパラグラフの使用子要素のclassは親要素にはじめに数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。しかしながら、このCSSのフレームワ
shinlinsui 2011/03/26
あとで読む

css

tips
リンク
1