[B! CSS] ryonknのブックマーク

2024年に最適なfont-familyの書き方 - ICS MEDIA

ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。結論いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,

ryonkn 2020/03/26

リンク

Free Bulma templates

More templates are waiting for you to make them! So, give it a go.

ryonkn 2020/02/23

リンク

NES.css - NES-style CSS Framework

Fork me on GitHub #About NES.css is NES-style (8bit-like) CSS Framework. #Installation NES.css is available via either npm or Yarn, or a CDN. Please read README.md. #Usage NES.css only provides components. You will need to define your own layout. {{ sample.title | capitalize }} {{ sample.description }} {{ sample.note }} <> copy {{ sample.code }} #Members Core Team Members Here is core team members

ryonkn 2018/12/07

css

リンク

DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier

DirtyMarkup: HTML Beautifier DirtyMarkup is the web's premier HTML beautifier. Used by millions of users around the world, our site and API has formatted HTML, CSS, and Javascript across nearly a billion lines of code.

ryonkn 2016/04/25

html
css

リンク

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日で

ryonkn 2014/04/20

css
web

リンク

Useful CSS Text Effects

2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！テキスト周りで使えるCSSの小技　目次テキストを選択する時の色を変更蛍光ペンで線を引いたような効果長いテキストを「…」で省略する番号リストの表現を変更リンクの種類でアイコン変える言語によってスタイルを変更テキストリンクのエフェクトプリント時はURLを表示長いURLを途中で折返す途中で折り返さず、次の行に先頭の文字を大きく先頭を一文字分あけるグラデーションテキストブラウザーは特記していなけれ

ryonkn 2014/02/05

css

リンク

CSS Toggle Switch: Accessible CSS toggle switch using standard form controls, with Bootstrap

Light switch Use the light switch, instead of a checkbox, for simple “On/Off” options.

ryonkn 2014/01/20

リンク

もうCSS設計で悩まない！「CSSコーディングガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディングガイドライン」策定のための参考記事を紹介します。チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックスコーディング規約を見直すうえで抑えておくべきポイントを紹介。チェックポイントコーディング規約に含むべき項目・ディレクトリやファイルの階層・名前・記述順やインデント、単位などのフォーマット・ID,classなどの命名規則・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"

ryonkn 2013/09/13

web
css

リンク

Bootstrap and Rails · Installation Guide and Tutorial · RailsApps

Installing Bootstrap for Rails 4.2. Guide and tutorial from the RailsApps Project. Thanks so much for this. There are so many Rails tutorials for absolute beginners, and lots of stuff that assumes expert knowledge, but not much, besides practice, to span the gap. Rick Quantz, HackerNews, 13 May 2011 I will be starting a new job here in SF, due in no small part to what I've learned here from the Ra

ryonkn 2013/06/25

リンク

Bootstrapの固定幅レスポンシブデザインのメモ : CSS | FindxFine

履歴愛知高等学校東海大学文学部北欧文学科東北大学大学院経済学研究科(中途退学) 個人サイト »Hiroshi Sawai »Info Town ご質問などありましたら下記アドレス宛へメールをお送りください。 info@findxfine.com WordPress テーマ、プラグインを公式テーマディレクトリ、公式プラグインディレクトリで公開しています。テーマ WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作で

ryonkn 2013/05/08

リンク

LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌

jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じますクリックするとオシャレに拡大。テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。関連エントリスワイプできるLightBox実装jQueryプラグイン「Swipebox」今こそ知っておくLightbox風プラグイン20+

ryonkn 2013/04/22

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO

トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0

ryonkn 2013/04/09

リンク

twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - ppworks.jp

twitter bootstrapを更に便利に使うgemがtwitter bootstrap railsです。 railsアプリを作りましょう。 rvmでgem set作ります。 rvm --create 1.9.3-p125@tbrsample railsアプリ生成します。 gem install rails --no-ri --no-rdoc rails new tbrsample gemを指定しましょう。 Gemfileのgroup :assetsに追加します。 cd tbrsample vim Gemfile gem "twitter-bootstrap-rails" どん bundle install --without=production bootstrapをgenerateしましょう。必要なjsやcssをapp/assets配下に配置します。 rails g bootst

ryonkn 2013/03/22

リンク

#268 Sass Basics - RailsCasts

$main-color: #1E7B12; @mixin rounded-corners($radius) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } body { margin: 0; padding: 0; background-color: #FFF; font-family: verdana; font-size: 14px; } #header { background-color: $main-color; color: #FFF; padding: 4px 100px; border-bottom: solid 5px darken($main-color, 10%); h1 { font-size: 30px; } } a { color:

ryonkn 2013/03/08

リンク

[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル

iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。デモページの確認 HTML CSS Media Queries 完成したデモの確認デモページの確認チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。デモページ左から、ノーマル、ナロウ、ス

ryonkn 2013/03/08

web
css

リンク

Flat UI - Free Bootstrap Framework and Theme

Checkboxes Unchecked Checked Disabled unchecked Disabled checked Radio Buttons Radio is off Radio is on Disabled radio is off Disabled radio is on

ryonkn 2013/03/05

リンク

tumblrのYouTube埋め込み表示がカッコイイ

最近tumblrのダッシュボードで流れるYouTubeの埋め込み表示が変わって「お!」な感じだったので調べてみました。まずYouTubeの動画を普通に貼りつけると、こうなります。特にこれでも問題ないというか、Youtubeの特徴的な再生ボタンのおかげで十分動画だと分かります。しかし最近のタンブラーの動画サムネはこのように変わりました。面白いですね。ノイズが動いているおかげで、より動画っぽい印象が増しています。劇的な変化でもないし、良くなったか悪くなったかは微妙な所ではありますが、個人的にはタンブラーらしい変化かなと思いました。※タンブラーは機能が増えるよりも減ることに喜びを感じる思想を持ってます。というわけで、ソースを覗いて実現法を見てみましょう。実装方法通常のYoutubeの埋め込みコードはこちらです。iframe一行のみ。 <iframe loading="lazy" w