脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
CSSで月の満ち欠け
月の満ち欠けは球体に光を当てた結果のもので、円を円でカットするようなものではない。CSSでは立体を立体としては扱うのは難しいので、それを平面として捉え、半円を円で膨らませたり押し出したりすることで近いものにすることが可能になりそうだ。 Demo: Lunar Phase CSSグラデーションで作った半円に、border-radiusで作った半楕円を組み合わせることで実現している。月齢15以上の場合は半円を逆転させる。地球と太陽と月の位置関係から平面で捉えると、半円を基本にするということであっている(と思う)。 例えば月齢5の場合は以下の様なCSSで構成されている。 .moon { border-radius: 51%; height: 3rem; overflow: hidden; position: relative; width: 3rem; } .phase5 { backgroun
娘娘飯店を見て育ちました
neotag @neotag 日本の秩序あるWWWのためには、親分がNEETたりえるだけの寄付金が必要。ホワイトバンドでも売ろうかしら。 2011-02-08 23:13:16
CSS アーカイブ
注 例えばgreenスタイルを改変する場合、greenスタイルがgreenスタイルである範囲内で改変をしても、原著者の権利は有効です。これはもはやgreenスタイルではない、と一般的に認められるとき、ようやく著作権から解放されます。したがって、「greenスタイルをPD相当にする方法」はありません。 スタイルファイルのURI一覧 直リンクや転載などの際にご利用ください。 green(now), think(now) CSS テストページ（now） その他 Index of /x/etc/css/file 再利用可能なスタイルのリンク集 おすすめのサイトの他は利用条件別で紹介します。ただ、スタイルの改変や部分的なパクりをどこまで許容するかについては見解が様々です。スタイルを見て勉強するだけなら問題ありませんが、一部または全部を改変して再利用する場合には、リンク先のサイトに記載の利用条件を熟読
memo：CSS アーカイブを作成
CSS アーカイブ はてブ経由でCSS Archives :: ねこまぐろ雑貨店を拝見して、「自分も、以前からこういうの、作っておきたいとは思っていたんだよな……」と。古いスタイルが増えて、自分でもよくわからなくなっていたので、ちょうどよかったです。 私の視界の範囲内では、どんどん新しいスタイルを作っていく方が多いようですが、私は少数のスタイルを延々とメンテナンスし続けるタイプ。歴史の長い「think」などは最新版の他に旧版のバックアップが8種類もあります。その変化を追いかけるのが個人的に楽しいので、アーカイブページの構成は少々複雑になりましたが、全ての旧版を紹介しています。 せっかくアーカイブページを作ったので、スタイルの配布についても考えてみました。私が作成したスタイルなら、どれもパブリックドメインにできるだろう……と思いきや、ほぼ全ての画像が素材集の画像を加工したもの（または全くその
フォントサイズチェッカー
スタイルシートでフォントサイズを指定したときに、どのくらいの大きさになるのかを表示。 ブラウザの文字サイズ設定は「中」「標準」を推奨。 IE・Firefoxなら フォントサイズ100％は、 フォントサイズ16pxと同じ。 フォントサイズ12pxは、 フォントサイズ75％と同じ。 フォントサイズ50% フォントサイズ51% フォントサイズ52% フォントサイズ53% フォントサイズ54% フォントサイズ55% フォントサイズ56% フォントサイズ57% フォントサイズ58% フォントサイズ59% フォントサイズ60% フォントサイズ61% フォントサイズ62% フォントサイズ63% フォントサイズ64% フォントサイズ65% フォントサイズ66% フォントサイズ67% フォントサイズ68% フォントサイズ69% フォントサイズ70% フォントサイズ71% フォントサイズ72% フォントサイズ
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
リキッドレイアウト｜ウェブユーザビリティ向上を支援するWebsite Usability Info
以前より当サイトを訪問してくださっている読者の方はお気づきかもしれませんが、当サイトでは、幅固定のレイアウトから、リキッドレイアウト（ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト）に変更しました。 上記の理由に加えて、そもそもWeb（インターネット）はユーザー主導型のメディアなので、Webコンテンツの表示サイズについても「基本的にはユーザーが任意にコントロールできるようにすべき」という想いがあります。たとえば弱視のユーザーが文字サイズを極力大きくしたい場合なども含めて考えると、その人なりの心地よい一覧性を実現する意味で、表示されるWebページの幅や高さを自由にコントロールしたいというニーズは高いのでは、と思うのです。 ただ誤解していただきたくないのですが、私は「固定幅レイアウトよりもリキッドレイアウトのほうが絶対的に優れている」と主張しているわけではありません。リキ
段落と字下げ - カナかな団首領の自転車置き場ダイアリー
とかなんとか、まあ、真名垣タンの物言いは、なんとなく生意気で、どこか恥ずかしくさせてくれるモノがあって、何か言ってやりたい心境にはなるのね。確かに。でも、それもいいんぢゃないかと、思ったり思わなかったりしちゃうわけぇ。 んでね。 どうでもいいけど、「カナかな団首領の日記」の人は、何故、段落の始めの一マスを空けないんだろう？ うわあ、一本取られたなぁ。そうですね。それではとりあえず、以下のスタイルをユーザースタイルシートに加えてみましょう。 p { text-indent : 1em ; } どうです、段落の最初が一字下げになりましたか？ユーザスタイルシートが何か分からない人は、W3C信者の首根っこを掴まえて聞いてみてね。 なんてね。 まあ、段落の最初を字下げするっていうのは、紙媒体では、割とポピュラーの書き方だし、小学校の作文の時間にもそうするように言われてたり言われてなかったりするもので
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
FreeCSSTemplates.org is now FCT.co
FreeCSSTemplates.org has been rebranded to FCT. Therefore, our new domain will be FCT.co while our previous domain FreeCSSTemplates.org will always be kept redirected here. What happened to FreeCSSTemplates.org? As the domain FreeCSSTemplates.org was dedicated to just “Free CSS Templates“, we decided to expand our brand name by keeping the domain name short but with more topics to cover. That mean
Leisurely February - JamGraffiti
はじめに このページは、CSS: Leisurely February スタイルの展示を行っています。 スタイルシートについて 汎用性があまりないです。 画像は全て壱茉が作ってます。 やっつけ仕事なところがあります。 コメント 白い背景が辛くなってきたので目に優しそうな配色で行こうかなと思って作ったもの。 スタイルの概要 名前 Leisurely February 公開日 初版: 2009-02-08 使用している画像 H1 要素 のアスタリスク画像 ナビゲーションのアスタリスク画像 外部リンクの矢印 フッタ付近のアスタリスク画像 例文 見出し 見出し : H4 見出し : H5 見出し : H6 定義リスト blue summer 夏向けに作ったので爽やかな感じ。 赤白黒 文字通り赤白黒のスタイルを。限界まで削ったようなデザインにしたかった。 monochrojam ドロップシャドウを初
title属性をつけてスタイルシートを読み込む場合の注意点
title属性をつけてスタイルシートを読み込む場合の注意点 link要素にtitle属性を付けてスタイルシートを読み込ませるとこれは優先スタイルシートと呼ばれるスタイルシートになります。 この件について問題があるサイトが報告されていますので、この辺の仕様と注意点について紹介しておきましょう。 固定スタイルシート(persistent style sheet) 固定スタイルシートとは文字通り、固定的に読ませるスタイルシートの指定方法です。 これによって指定されているスタイルは、以下で説明する優先スタイルシートや、代替スタイルシートと同時に適用されます。 固定スタイルシートはtitle属性を付けずにlink要素を記述します。 <link rel="stylesheet" href="foobar.css" type="text/css"> 優先スタイルシート(preferred style s
リキッドレイアウトとソリッドレイアウト - カナかな団首領の自転車置き場ダイアリー
ウィンドウサイズに合わせて、一行の幅が可変なのが、リキッドレイアウト。ウィンドウサイズに関わらず、一行の幅は固定なのがソリッドレイアウト。 という前提で。 読みやすいと感じる幅は、千差万別、百人百様だとして。 リキッドレイアウトなら、全ての利用者が、自分が読みやすい（その環境でベター）と感じる幅に、調整出来るが、ソリッドレイアウトでは調整出来ない。 たとえば、制作者により提供されたレイアウトが、なんの調整を行うことも無く、利用者の 8 割を満足させるものだとしても、残り 2 割は満足させられない。その 2 割の利用者を、ウィンドウのリサイズを行うだけで、満足させることが出来るのがリキッドレイアウトで、ウィンドウのリサイズだけでは満足させることが出来ないのがソリッドレイアウト。 という話なんだ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SASSIENCE ～ 世界が嫉妬するCSSへ
Web制作 W3G
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
リンクが分かりやすいデザインはいいウェブデザイン - 雑記 - AZ store
The Do’s & Don’ts of Modern Web Design
株式会社paperboy&co. / ペパ研