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

Reboot.css　Bootstrap製Reset.cssからCSSの新しいスタンダードを読み解く｜Goodpatch Blog グッドパッチブログ

皆さんが新しくWebベースのプロジェクトを始める際に、様々なパッケージをインストールするかと思いますが、どんなプロジェクトを始めるにせよ、大抵はその中になんらかの Reset.css が含まれていることでしょう。 Reset.css とは、Google Chrome やIEなどの各ブラウザが独自にもっているデフォルトCSSをブラウザごとに差異がないように平準化し、フロントエンド開発者がデザインをしやすいようにするために読み込まれる CSS です。例えばhtmlファイルに <h1>Hello CSS</h1> と書いた時に、なにもCSSを書かなくても太文字で大きく表示されるのはデフォルトCSSが適用されているためです。 Reboot.css はCSSフレームワークとしてgithubで最もスターを集めている Bootstrap が、現在開発中の v4 から採用している新しい Reset.cs

stilo 2017/11/07

目を通した。

リンク

レスポンシブ対応！縦に半分割しているWebサイトの作り方

2017年1月16日 CSS, Webデザイン, スマートフォン画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。幅の狭いデバイスで見るとカラムが縦並びに変更されます。今回

stilo 2017/01/17

なるほど、こういう作りなんですね。bootstrapで手抜きして「.col-sm-12.col-md-6」してました...

CSS

リンク

【コピペOK！】めっちゃ秘密にしたかったけどCSSで文字を震えさせる方法を大公開するよ！ - にーとのかがみ。

どうも、沖縄在住ニートブロガーのケンヂ︵@neetblogman︶です。実は最近、僕のブログで使用しているとある機能について問い合わせを受けることがちょくちょく出てきました。まぁ既にタイトルにも記載しているんですが、文字が震える機能のことです。これとか！これね！！！この機能が僕のブログに独自性を持たせていたともいえるため、この方法を周りのブロガーに紹介してしまうと僕の存在が消えてしまうのではないかという恐れがありますが、今回はそこについて気にしない方向で行きたいと思います。何故なら、一度はIT業界に携わった身ですからアウトプットの大切さを僕は知っているのです。アウトプットがあるから新たなインプットが生まれる、これの繰り返して人間という生き物は成長していくのですよ。というわけで！！誰でもサクッと簡単に使うための方法を教えちゃうよ―(‘ω‘ ) CSSなどの導入方法はこちらのペー

stilo 2016/10/04

笑えるｗ

リンク

Webデザインにおけるタイポグラフィの考察 | ノート | dotgraphy

2016年5月16日︵月︶に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。﹁の﹂﹁を﹂﹁と﹂はTypography 09の﹁組版上級者になるためのメソッド　工藤強勝さんのスタッフ指導﹂よりうちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い﹁の﹂﹁を﹂﹁と﹂などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。とあったので、﹁の﹂﹁を﹂﹁と﹂をTP明朝でつくってみました。目的紙のタイポグラフィ

stilo 2016/05/17

「本文はフォントサイズ16px、行間1.6が一番多かったです。」

リンク

メンテナブルCSS | 株式会社サイバーエージェント

1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、非常にメンテナンスコストがかかる負の遺産が作られてしまいます。そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。これらルールの適用を補助するツール群を、合せて報告致します。

stilo 2016/04/21

リーダブルです。ありがとうございます。

css

リンク

12 Small CSS Frameworks To Use In Your Web Designs

President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. You probably don’t need most of the fe

stilo 2016/03/31

サイズ容量が小さいCSSフレームワーク。比較一覧表付き。

css
design

リンク

Bootstrap 3 responsive centered columns · Minimit

An easy solution to center multiple columns in Bootstrap 3, also on mobileThe Probl emSometimes you want to center Bootstrap columns, usually when you have an uneven number of them, or when you give them a max-width and they don't fill up the containing row.The Solution The MarkupJust add the class .row-centered to the row and .col-centered to the columns. <div class="container"> <div class="row ro

stilo 2016/02/05

Bootstrapを使ってGrid組むときにセンターにしたり横幅固定したり。

リンク

AtomエディタのMarkdown PreviewのCSSを実務書類的に調整する | 大石制作ブログ

大石制作ブログblog.s004.com デザイナー大石真也が知りたかったこと、見たかったことのメモと、仕事紹介。自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed Atomエディタ、すっかり使いやすくなりましたね。出始めのころは動作が重く、使い物にならないと感じてたけど、しばらく経って入れなおしてみると、凄まじい進化をして、当時Sublime Textを使っていた僕も乗り換え不可避でした(笑) そのAtomエディタのならではの標準プラグイン、Markdown Previewの表示のスタイルは、元々GitHub的スタイルなだけあって、そのままでも本当に美しいです。だけど、これは完全にパソコンスクリーン表示向け、そして半角文字向けの見た目なので、それを印刷やPDF化したり、プロジェクタで映す場合、ちょっと見辛い上、日本語が主体

stilo 2016/01/04

なるほど。CSSでドキュメントの体裁を整えていけばいいのか。

リンク

CSS LINT での警告 "Don't use IDs in selectors" について - {u:b}

今話題の CSS LINT (http://css lint.net/) ですけども。チェックすると warnings で "Don't use IDs in selectors" って出るんですね。理由を見てみるとこんなことが書かれていました。 IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's much preferred to use classes in selectors and then apply a class to an element in the page. 簡単に訳してみると (あってるかどうかは分からない) セレクタ内でIDを使用しないでください。こ

stilo 2015/12/02

へー、そういうことか。

css

リンク

デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました - はてなブログ開発ブログ

本日、はてなブログのサンプルテーマ﹁Boilerplate﹂を公開しました。デザインCSSをカスタマイズする土台に適しています。 Boilerplate︵ボイラプレート︶は、必要最小限の見た目だけがあらかじめ調整された、プレーンなサンプルテーマです。このテーマをもとにCSSを記述すると、はてなブログのデザインテーマを比較的カンタンに作ることができます。 Boilerplateテーマの見た目﹁オリジナルテーマの制作にチャレンジしたいけど、ゼロから作るのは大変﹂という方のために用意しました。ぜひ、このテーマを使ってCSSのカスタマイズに挑戦してください。もちろん何もカスタマイズしなくても、シンプルなデザインテーマとしてそのまま使うこともできます。 Boilerplateテーマの使い方 Boilerplateテーマのソースコード︵CSSおよびLESSファイル︶は、GitHubで公開しています。

stilo 2013/04/11

リンク

HTML5+CSS3 入門

Webを記述する言語の標準の現状昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか：ウェブの歴史 [Page 2] よ

stilo 2010/12/12

html5
css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

stilo 2010/03/15

やってみたい

css
web

リンク

第13回　Webページで読みやすいテキストとは：ITpro

今回のポイント1行あたりの文字数の目安1段落の文字数の目安段落に含む文字数行間調整の考え方字間調整を使ったロゴ風味見出し日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。一方，縦書きの場合には識別許容量はグンと増加し

stilo 2008/03/24

リンク

CSS Nite purprinさんのプレゼン (SOLVALOU.NET)

先日行われたCSSNite in 名古屋でのpurprinさんのプレゼンを公開しました。極力ハックしないCSS http://escafrace.heteml.jp/presentation/20070310/video/ ハックとはなんぞや、という話から、DocuTypeの話、ボックスモデルでの実例など、基礎的ながら抑えておきたい内容となってます。ぜひご覧ください。 pur.logの方で、僕が徹夜で実装したと書かれてますが、実際のところ実装自体は超単純︵cuepointごとにスライドを変えるだけ︶で、スライド(180枚)と時間の関連付けが超めんどくさかった感じです。プレゼン中のクリックイベントとかを拾って、記録するようにしたらこういうのラクにつくれそうなんですけどね。んで、ホントはもうすこしいい感じの実装になるはずだったんですけど、時間がなかったので適当な感じに。。動画の分割と

stilo 2007/03/15

CSSについてのプレゼン。名古屋であったらしい。

リンク

http://ash1no0to.dyndns.org/htdocs/archives/2007/01/firebug3_firebu.html

stilo 2007/01/08

あまり時間をかけずにCSS編集する見本

リンク

inforno :: Python:アクセサの生成

Pythonの練習がてら、アクセサの生成をやってみる。どうせ探したらいっぱいコードが転がってるだろうし、練習にはうってつけかな、と。まず、ダメそうだけど、Rubyをやってる人からするとこうかきたい、というコード。 1class Test(Accessor): 2 attr_accessor("__test", "__test2", "test3", "_test4") 3 4 def __init__(self): 5 self.__test = "test_value" 6 self.__test2 = "test2_value" 7 self.test3 = "test3_value" 8 self._test4 = "test4_value" こんな感じ。まぁ、絶対にダメそうだ︵笑でも組み込みとはいえ、classmethodやstaticmethodみたいなのもあるから無理やりに

stilo 2006/10/29

なんかこのサイトきれい。

python
css

リンク

汎用CSS - tikeda's blog

先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。構成ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。common.css タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば﹁一覧用︵.table-list︶﹂﹁管理画

stilo 2006/09/06

機会無いけど、参考までに。

リンク

はてなブックマーク

タグ

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

cssに関するstiloのブックマーク (17)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス