CSSでシンプルに水平スクロール（横スクロール）のリストを作る - Qiita
横スクロールのUI 個々最近、カード型のコンテンツが横に並んでいてスクロールできるUIをよく見かけるようになりました。 例えばAirbnbのWebサイトではこんな感じ。 CSSで水平スクロールを実装する ポイントは次のとおり。 - ulおよびliを使ってリスト構造を表現する - ulに対してoverflow-x: auto;、white-space: nowrap;を指定 - liに対して、display: inline-block;を指定 - liに対してwidth: 90%;のような横幅を指定すると、コンテンツが見切れて見えるhorizontalので、横スクロールできることがわかりやすい ソースコードはこんな感じ。 <!DOCTYPE html> <html> <head> <title>Horizontal Scroll</title> <style> .horizontal-lis
position: sticky でいろいろなスティッキー（追尾）サイドバーを試す - Spuit
ブログ的なレイアウトだと、サイドバーをスクロールに合わせて固定させたいということがよくありますよね。一般的にこれは JavaScript で実装されますが、せっかくなので CSS の position: sticky で試してみました。 position: sticky とは 使用頻度の高い position プロパティにあって sticky なる値は聞いたことがないかもしれませんが、これは CSS Positioned Layout Module Level 3 にて追加された新しいもので、なかなか説明するのがムズカシイのですが、fixed と relative を合わせたようなものだと MDN では説明されています。 position: sticky と しきい値 （top, right, bottom, left プロパティ）を指定することで、画面上の絶対位置がしきい値より大きいとき
Webデザインリリック
「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法
CSS Beautify
CSS Beautify automatically formats your style to be consistent and easy to read Only one blank line between two rulesets Closed curly brace is at its own line There is no empty line between declarations inside a ruleset No space between the property name and colon One space between colon and the property value Comments are preserved
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」
Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。 そんなCSSスプライトを簡単に実装するためのWebサイトSpriteMachineのご紹介。スプライトマシーン…すごく…イイ名前です… imgを圧縮してアップロードするだけ サイトに訪れたらまずは画像配置のレイアウトと吐き出すコードのフォーマットを決めます。 ちなみにフォーマットはCSSだけではなく、SCSSやSASSも選択可能です。 次に、CSSスプライトにする画像をひとまとめにして、そのフォルダを圧縮、ZIPファイルにしましょう。 そしてそのファイルを上の場所にアップロードすると… 自動的に「spritemachine」というフォルダがダウンロードされます:) フォルダの中身はpng画像とc
Code Beautifier
Code Layout Compression (code layout): Custom template Options Preserve CSS Sort Selectors (caution) Sort Properties Regroup selectors Optimise shorthands Compress colors Compress font-weight Lowercase selectors Case for properties: None Lowercase Uppercase Remove unnecessary backslashes Remove last ; Discard invalid properties Add timestamp Output as file
CSSだけでタブ切り替えを実装してみた。（CSS Programming Advent Calendar 2012 – 06日目） | Ginpen.com
CSS Programming Advent Calendar 2012 – 06日目 JavaScriptを使わず、CSSを駆使してそれっぽい事をやるCSSプログラミングのアドベントカレンダーへの投稿記事です。 いわゆるタブ的な動きを、CSSだけで組みました。（※実務で使っちゃ駄目ですよ！） タブのCSS自体の組み方はこちらをどうぞ: ありがちなタブのマークアップとスタイル実装例。（CSS おれおれ Advent Calendar 2012 – 06日目） デモ どーん！ .tab-switch:nth-of-type(1):checked ~ .tab-button:nth-of-type(1), .tab-switch:nth-of-type(2):checked ~ .tab-button:nth-of-type(2), .tab-switch:nth-of-type(3):che
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
『記事タイトルの下の「投稿時間」と「テーマ」の位置をちょっと変更する方法』
最近、幼稚園児の娘におちょくられている？アトラボです。 先日記事タイトルのカスタマイズをしましたが、どうもバランスが悪いなーと思っていたんで、その周辺をチョコチョコッと調整します。 デザインの主従関係の調整今回扱うのは、記事の下に表示されている「投稿日時」と「テーマ」の部分です。ご存じのとおり、「投稿日時」は「アメブロの基本設定」でいろんな表示方法を選択できます。(ちなみに投稿者のIDも表示できますが、していないので今回は割愛します) その表示方法によって、長さは違うもののテーマと二行に分かれているので、なんだか右側のスペースがもったいない、というか中途半端のように感じられました。 上部にある記事タイトルの装飾方法がそう見せているのかもしれませんが、この場合デザイン要素としては「従」となる「投稿日時」と「テーマ」を調整して解決したいと思います。 「テーマ」だけを動かして調整それでは、いつも
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック
デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 実装のイメージ：天地均等にクリップ [ad#ad-2] HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src="path/to/your/image.jpg" alt="your image"> </div> CSS 上限の高さを450pxに設定します。 .image-wrap { max-height: 450px; overflow: hidden; max-width: 800px; -webkit-transition: max-width
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
CSSのみでマウスオーバー時にリンク先のURLをツールチップで表示させる - かちびと.net
cssの小技的な内容です。さほど使う機会は無さそうなんですけど、JavaScriptを使うほどでも無いようなものなのでcssだけでやって見た、みたいな記事。リンクにマウスを乗せるとそのリンク先のURLをツールチップとして表示させます。 対応ブラウザはモダンブラウザとIE8以上です。:afterを使うのでIE7以下は対応できません。 cssでリンク先のURLを表示する まずはcssのみでリンク先のURLを表示させます。 マークアップは以下で固定。 <a href="/">かちびと.net</a> HTMLはこのままで、cssのみでリンク先のURLをマウスオーバーによるツールチップで表示させます。 URLを表示させる まずはURLを表示させます。 a[href]:after { content: attr(href); } これはよく印刷用のcssで用いられる手段で、印刷する際に、URLも表示
[CSS]ホバー時にアニメーションでふんわりと浮かぶナビゲーション
CSS3 Flying Menu デモページ [ad#ad-2] CSS3 Flying Menuのデモ デモでは他にも、ふんわりと浮かびつつ、ハイライトされるものもあります。 デモページ CSS3 Flying Menuの実装 HTML:ふんわりと浮かぶタイプ 各アイテム（アイコンとテキスト）をリスト要素で実装します。 <ul id="fly-menu"> <li><a href="http://www.webstuffshare.com"><img src="images/heart.png" alt="webstuffshare">Webstuffshare Home</a></li> <li><a href="http://feeds.feedburner.com/webstuffsharecom"><img src="images/rss.png" alt="rss"> Subs
CSSリファレンス(CSS入門) - とほほのWWW入門
CSSとは？ CSSの例 CSSの指定方法 style属性で指定する方法 <style>～</style>で指定する方法 <link>を用いた外部CSSファイルで指定する方法 @importを用いた外部CSSファイルで指定する方法 タグと要素とセレクタ 継承 セレクタ CSSネスティング コメント 優先度の順位(詳細度) 長さの単位 CSSのメリット 見栄えを一度に指定できる 見栄えと意味を分離できる CSSとは？ CSS は Cascading Style Sheets の略です。CSSは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。 CSSの例 最も基本的なCSSの使用例を下記に示します。この例では、<h1>～</h1> で囲まれたタイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting to https://watercss.kognise.dev/
リセットCSSをダウンロードしてくるのが面倒なら、覚えてしまえばいいじゃない。（CSS おれおれ Advent Calendar 2012 – 12日目） | Ginpen.com
[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート