タグ

関連タグで絞り込む (21)

タグの絞り込みを解除

CSSに関するaopuuのブックマーク (44)

  • http://www.responsivewebcss.com/

    aopuu
    aopuu 2013/08/17
    ぶくま：レスポンシブ用のCSSを書き出すツール。便利そう｜Design Your Own Responsive Page Layout - Responsive Web CSS
    リンク

  • http://joshnh.com/tools/em-baseline-generator.html

    aopuu
    aopuu 2013/04/13
    ブックマークしました　EMベースでフォントサイズと行間から縦ラインを揃えるCSSを書きだしてくれるWebサービス｜Em Baseline Generator
    リンク

  • スタイルシートの有用なスニペットのまとめ | コリス

    よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ

    aopuu
    aopuu 2012/11/03
    【CSS・Web製作】すごいよくできてる…個人的にかゆかったところを全部かいてくれた感じ…ぶくま｜ウェブ制作に役立つ、スタイルシートの有用なスニペットのまとめ | コリス
    リンク

  • CSSの記述が3倍速くなる「LESS」の使い方 (1/2)


    2012年02月09日　13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、﹁Blueprint﹂や﹁960 Grid System﹂に代表されるフレームワークが登場しています。 ﹁LESS﹂や﹁Sass﹂のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
    CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
    aopuu
    aopuu 2012/08/25
    CSSの省略記述…はじめて聞いた。こんなの出てたんだ｜ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方
    リンク

  • HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck

    Collection of Awesome CSS and JS Creations to help out frontend developers and designers.

    aopuu
    aopuu 2012/06/01
    cssスニペット集
    リンク

  • これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのうぇぶ屋


    よくリンクにアイコンを付けることってありますよね？アレをリンク先のfaviconを自動で表示させることってできればって思ったことってないっすか？ そんなWEB屋なら一度は︵？︶考えたことのあるfaviconのアイコン化がこんな感じで実装できることをつい先日知ることになり、びっくり感動してしまったので是非ご紹介させて頂ければこれ幸いです！ 元記事はこちら！ Favicons Next To External Links | CSS-Tricks これ実装すると、つまり下のような感じになるわけっすね！ これ、何をしてるのか気になって見てみたら、そもそもgetFaviconっていうサービスがあるらしいことをしりました。これはリンク先のURLをパラメーターとして渡すと、リンク先の<link>情報みて、faviconのURL引っ張ってくるって仕組みらしいですね。 http://g.etfv.co/h
    これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのうぇぶ屋
    aopuu
    aopuu 2012/05/30
    ぶくま｜これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのWEB屋
    リンク

  • Loading

    aopuu
    aopuu 2012/04/11
    CSSセレクター一覧｜CSS Selectors Level 3 - A Quick Reference
    リンク

  • [CSS] 美しいパンくずを実装する4つのスタイルシート | コリス


    画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。4つデモは、全て画像を使用していません。 デモページ‥ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
    aopuu
    aopuu 2012/01/26
    ぶくま｜シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス
    リンク

  • Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime


    結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
    Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
    aopuu
    aopuu 2012/01/23
    ぶくま：これはすごいや…｜Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと. net
    リンク

  • 20 Useful CSS Graph and Chart Tutorials and Techniques - Designmodo

    20 Useful CSS Graph and Chart Tutorials and Techniques CodingNataly Birch • June 27, 2022 • 14 minutes READ Usually, Graphs and Charts are mainly used for representing and organizing a set of numerical data with a graphical representation such as pie chart, line charts, bar graphs and many more. The static images would be reduced using these techniques and enables more access to the contents of th

    20 Useful CSS Graph and Chart Tutorials and Techniques - Designmodo
    aopuu
    aopuu 2012/01/17
    メモ程度にぶくま、CSSでグラフをつくる｜20 Useful CSS Graph and Chart Tutorials and Techniques - DesignModo
    リンク

  • [CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css


    フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.cssの使い方 ﹁animate.css﹂を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet" href="animate.css" /> エレメントにclassを付与 <p class="flash">Live long and prosper.</p>Animate.cssの実装 デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できま
    aopuu
    aopuu 2011/10/18
    とりあえずぶくま｜classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css | コリス
    リンク

  • 960 Grid System

    960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,

    aopuu
    aopuu 2011/10/10
    いいかげんぶくましとこう…｜960 Grid System
    リンク

  • レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGrid


    シンプルでいいなーと思ったのでシェアがてら ご紹介。レスポンシブWebデザインに対応できる グリッドレイアウト構築用のCSSを吐き出して くれるジェネレーターです。必要最低限のコード だけ出してくれるのは嬉しいかも。頻繁に 使うものではないけど覚えておきたいですね。 ネタ元はUnformedbuildingさんのまとめ記事からです。今回は他にも気になる情報が沢山ありました。ぜひチェックしてみてください。 個人的にはこのWebサービスが一番気になったのでテストしてみましたよ。 至ってシンプルなサービスです。希望の値を入力していくだけで軽量なCSSを吐き出すのでそれを元に設計していく、みたいな感じ。 デモがあったのでマネして作ってみました。 Sample ※幅のテストはresponsivepxが便利です。 スクリーンショット ↑ 幅の広いデバイス ↑ 狭いデバイスでもグリッドを保ちます。 設定
    レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGrid
    aopuu
    aopuu 2011/09/09
    ほおお、ぶくま｜レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGrid - かちびと.net
    リンク

  • 地味に使えるCSS小技のメモ&サンプル集

    cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef

    地味に使えるCSS小技のメモ&サンプル集
    aopuu
    aopuu 2011/09/05
    ぶくま｜地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
    リンク

  • [CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス

    実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。

    aopuu
    aopuu 2011/07/08
    チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
    リンク

  • Font comparer

    Paste this within your head tag <link href='https://fonts.googleapis.com/css?family=&subset=latin' rel='stylesheet' type='text/css'> CSS.yourclass { font-family: ; }

    aopuu
    aopuu 2011/06/28
    GoogleWebFontのプレビューとコード書き出し｜Font comparer
    リンク

  • 標準の日本語フォント / もうパンツはかない


    各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
    標準の日本語フォント / もうパンツはかない
    aopuu
    aopuu 2011/06/17
    CSS指定用｜ぶくま：標準の日本語フォント / もうパンツはかない
    リンク

  • MdN Design｜総合情報サイト


    ナビゲーションはコンテンツと分離したユーザーインターフェイスだが、1ページ内に配置される重要な要素である。デザインのテイストをあわせるときは、見出しや本文などのコンテンツ要素と同化しないようにデザインする必要がある。リン クボタンが並ぶナビゲーションは通常、ul要素、li要素でリスト定義された箇条書きに対してスタイルを指定していく。ここで解説するサンプルでは、﹁ヘッダー領域＋ナビゲーション領域＋コンテンツ領域＋フッター領域﹂といった標準的な構造のページを使用する︻1-1︼︻1-2︼。 ︻1-1︼ヘッダー︵header︶＋ ナビゲーションとコンテンツ︵contentGroup︶﹇ ナビゲーション︵globalheader︶＋ コンテンツ﹈ ＋ フッター︵footer︶という構成 ︻1-2︼
    MdN Design｜総合情報サイト
    aopuu
    aopuu 2011/06/09
    こんなのやってたのね！たしかに新標準レイアウト術！時間あるときに読みたい｜Webデザイン表現＆技法の新スタンダード - レイアウト編目次 - MdN Design Interactive
    リンク

  • 30+ Tooltips Scripts With JavaScript, Ajax & CSS

    Tooltips are the easiest and coolest way to show additional information or special reference,  which is often shown with mouseover or click actions, Here We’ve Collected 30+ Tooltip Scripts vary from CSS,Ajax based, mootools and jQuery with cool Animation . which you can easily incorporate into your future designs. ToolTip_MooTools. usies Gzip loader technique that will deliver CSS and Javascript

    aopuu
    aopuu 2011/05/07
    AJAXとcssで実装するガイド系ツールチップ集｜ぶくま：30+ Tooltips Scripts With JavaScript, Ajax & CSS
    リンク

  • PrimerCSS

    Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started. Made for you with love and care by @luckystrikes and @wades. Notice: Undefined index: htmlsrc in /home/ypp7m8mtix54/domains/primercss.com/html/index.php on line 43

    aopuu
    aopuu 2011/03/11
    やべえなにこれ超便利！CSSのIDやクラス一覧を拾ってCSS形式で書きだしてくれる！｜PrimerCSS
    リンク
  • 1 2 3 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.