垂直方向に複数の段落と画像が並ぶとき、間隔を均一にしたければ、それぞれ同じ大きさのmarginプロパティを適用するだろう。 <p><!-- ... --></p> <p><!-- ... --></p> <figure><!-- ... --></figure> <p><!-- ... --></p> :root { --space-default: 1rlh; } p { margin-block-start: var(--space-default); margin-block-end: 0; } figure { margin-block-start: var(--space-default); margin-block-end: 0; } See the Pen Untitled by Yuhei Yasuda (@yuheiy) on CodePen. しかし実際には、このように
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
月の満ち欠けは球体に光を当てた結果のもので、円を円でカットするようなものではない。CSSでは立体を立体としては扱うのは難しいので、それを平面として捉え、半円を円で膨らませたり押し出したりすることで近いものにすることが可能になりそうだ。 Demo: Lunar Phase CSSグラデーションで作った半円に、border-radiusで作った半楕円を組み合わせることで実現している。月齢15以上の場合は半円を逆転させる。地球と太陽と月の位置関係から平面で捉えると、半円を基本にするということであっている(と思う)。 例えば月齢5の場合は以下の様なCSSで構成されている。 .moon { border-radius: 51%; height: 3rem; overflow: hidden; position: relative; width: 3rem; } .phase5 { backgroun
注 例えばgreenスタイルを改変する場合、greenスタイルがgreenスタイルである範囲内で改変をしても、原著者の権利は有効です。これはもはやgreenスタイルではない、と一般的に認められるとき、ようやく著作権から解放されます。したがって、「greenスタイルをPD相当にする方法」はありません。 スタイルファイルのURI一覧 直リンクや転載などの際にご利用ください。 green(now), think(now) CSS テストページ（now） その他 Index of /x/etc/css/file 再利用可能なスタイルのリンク集 おすすめのサイトの他は利用条件別で紹介します。ただ、スタイルの改変や部分的なパクりをどこまで許容するかについては見解が様々です。スタイルを見て勉強するだけなら問題ありませんが、一部または全部を改変して再利用する場合には、リンク先のサイトに記載の利用条件を熟読
CSS アーカイブ はてブ経由でCSS Archives :: ねこまぐろ雑貨店を拝見して、「自分も、以前からこういうの、作っておきたいとは思っていたんだよな……」と。古いスタイルが増えて、自分でもよくわからなくなっていたので、ちょうどよかったです。 私の視界の範囲内では、どんどん新しいスタイルを作っていく方が多いようですが、私は少数のスタイルを延々とメンテナンスし続けるタイプ。歴史の長い「think」などは最新版の他に旧版のバックアップが8種類もあります。その変化を追いかけるのが個人的に楽しいので、アーカイブページの構成は少々複雑になりましたが、全ての旧版を紹介しています。 せっかくアーカイブページを作ったので、スタイルの配布についても考えてみました。私が作成したスタイルなら、どれもパブリックドメインにできるだろう……と思いきや、ほぼ全ての画像が素材集の画像を加工したもの（または全くその
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
以前より当サイトを訪問してくださっている読者の方はお気づきかもしれませんが、当サイトでは、幅固定のレイアウトから、リキッドレイアウト（ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト）に変更しました。 上記の理由に加えて、そもそもWeb（インターネット）はユーザー主導型のメディアなので、Webコンテンツの表示サイズについても「基本的にはユーザーが任意にコントロールできるようにすべき」という想いがあります。たとえば弱視のユーザーが文字サイズを極力大きくしたい場合なども含めて考えると、その人なりの心地よい一覧性を実現する意味で、表示されるWebページの幅や高さを自由にコントロールしたいというニーズは高いのでは、と思うのです。 ただ誤解していただきたくないのですが、私は「固定幅レイアウトよりもリキッドレイアウトのほうが絶対的に優れている」と主張しているわけではありません。リキ
とかなんとか、まあ、真名垣タンの物言いは、なんとなく生意気で、どこか恥ずかしくさせてくれるモノがあって、何か言ってやりたい心境にはなるのね。確かに。でも、それもいいんぢゃないかと、思ったり思わなかったりしちゃうわけぇ。 んでね。 どうでもいいけど、「カナかな団首領の日記」の人は、何故、段落の始めの一マスを空けないんだろう？ うわあ、一本取られたなぁ。そうですね。それではとりあえず、以下のスタイルをユーザースタイルシートに加えてみましょう。 p { text-indent : 1em ; } どうです、段落の最初が一字下げになりましたか？ユーザスタイルシートが何か分からない人は、W3C信者の首根っこを掴まえて聞いてみてね。 なんてね。 まあ、段落の最初を字下げするっていうのは、紙媒体では、割とポピュラーの書き方だし、小学校の作文の時間にもそうするように言われてたり言われてなかったりするもので
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
はじめに このページは、CSS: Leisurely February スタイルの展示を行っています。 スタイルシートについて 汎用性があまりないです。 画像は全て壱茉が作ってます。 やっつけ仕事なところがあります。 コメント 白い背景が辛くなってきたので目に優しそうな配色で行こうかなと思って作ったもの。 スタイルの概要 名前 Leisurely February 公開日 初版: 2009-02-08 使用している画像 H1 要素 のアスタリスク画像 ナビゲーションのアスタリスク画像 外部リンクの矢印 フッタ付近のアスタリスク画像 例文 見出し 見出し : H4 見出し : H5 見出し : H6 定義リスト blue summer 夏向けに作ったので爽やかな感じ。 赤白黒 文字通り赤白黒のスタイルを。限界まで削ったようなデザインにしたかった。 monochrojam ドロップシャドウを初
ウィンドウサイズに合わせて、一行の幅が可変なのが、リキッドレイアウト。ウィンドウサイズに関わらず、一行の幅は固定なのがソリッドレイアウト。 という前提で。 読みやすいと感じる幅は、千差万別、百人百様だとして。 リキッドレイアウトなら、全ての利用者が、自分が読みやすい（その環境でベター）と感じる幅に、調整出来るが、ソリッドレイアウトでは調整出来ない。 たとえば、制作者により提供されたレイアウトが、なんの調整を行うことも無く、利用者の 8 割を満足させるものだとしても、残り 2 割は満足させられない。その 2 割の利用者を、ウィンドウのリサイズを行うだけで、満足させることが出来るのがリキッドレイアウトで、ウィンドウのリサイズだけでは満足させることが出来ないのがソリッドレイアウト。 という話なんだ。
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
border等でやるのもいいけど、そろそろＣＳＳ擬似要素でハッチャケちゃってもいい時期だと思うので、実験を兼ねて色々なパターンのサンプルを作ってみる。フォントによってどうなるかわからんのである程度は「お遊び」程度のものと捕らえて欲しい。ポイントになるのは、 字詰め（letter-spacingのマイナスの値） 「white-space:pre」必須（特に全角の文字等を使う際） 元要素に「overflow:hidden」必須 字詰めをやっとかないとアスキーアートやメルマガなんかと変わらないものが多いので注意。 その他、このパターンも良いよてなものがあったらコメント欄にでもガンガン入れちゃってください。サンプルに追加します（気が向いたら）。尚、サンプルのスタイルは都合上contentの量を減らしています。あと、このページのみ、のけぞるようなソースをしているが借り物のシステム上、お察し下さい。
Stuff & Nonsense Creative direction from the biggest ideas to the smallest interactions Product, website, and user experience design I’m Andy Clarke and this is my studio, Stuff & Nonsense. For over two decades, I’ve guided the web industry towards accessible, engaging, and impactful designs using innovative applications of the latest technologies. I’ve worked with organisations of all sizes and i
Saturday, December 13, 2008 Oplaz Css Menu Oplaz css menu with simple effect for hover and current menu item, this css menu width is fixed to 700px, while increasing menu item you can decrease padding and margin between menu items. This menu can be used on white background with light and semi-dark supporting colors. You can download menus source code with images for free. Demo Menus has been teste
ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
