タグ

cssとWeb制作に関するheyMackieのブックマーク (18)

  • 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

    HTMLCSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります(※)。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

    2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
  • jsdo.it

    Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a

  • フォントサイズ「px→%」表記一覧・早見表 - 人生は暇つぶし

    2016 - 01 - 11 フォントサイズ「px→%」表記一覧・早見表 まとめ スポンサーリンク Tweet Webサイト制作において、フォントサイズは非常に重要ですよね。僕の会社では、フォントサイズを指定するとき、 PCサイトでは「%」 、 SPサイトでは「px」 で指定しています。 その際、%表示を計算するのが面倒くさいので、この機会にフォントサイズ「px→%」表記一覧・早見表を作成します。 目次 目次 フォントサイズのパーセント表記一覧・早見表の計算式 主要ブラウザのデフォルトフォントサイズは16px フォントサイズのパーセント表記一覧・早見表 フォントサイズ16% まとめ フォントサイズのパーセント表記一覧・早見表の計算式 表示したいサイズ / 基サイズ * 100  小数点以下は切り上げて計算します。表示したいサイズは10~30pxとします。 主要ブラウザのデフォルトフォント

    フォントサイズ「px→%」表記一覧・早見表 - 人生は暇つぶし
  • Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita

    CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ

    Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita
  • ブルマがすごい!外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma

    外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。 一部だけ利用してもよし、もちろん全部を利用してもよし、カスタマイズも簡単なので、ブルマをベースに自分用のデザインを適用して利用するのもよしです。

    ブルマがすごい!外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
  • CSSでのフォント指定について考える(2014年)|DTP Transit

    結論1:アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日語名、OS X Mavericks(10.9)ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2:「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考: ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり!(2013春) 結論2:新しい字形に対応をしている「ヒ

    CSSでのフォント指定について考える(2014年)|DTP Transit
  • CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials

    Launching a website can be an exciting venture, requiring decisions on its digital residence. If you explore VPS Hosting options, you can choose to host on a private server and gain substantial control over your online environment. This choice is ideal […] Read Article In today’s digital age, protecting yourself from identity theft is more important than ever. With the vast amount of personal info

  • 【CSS】決定版!リセットCSS総まとめ

    HTMLCSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは? 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ

    【CSS】決定版!リセットCSS総まとめ
  • ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL

    俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ!! t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって

    ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
  • 譁ー闡。逧�莠ャ髮�蝗「3522vip窶披�比クュ蝗ス譛蛾剞蜈ャ蜿ク

    404 - ユメイサオスホトシサソツシ。」 ト昮ェイ鰈メオトラハヤエソノトワメムアサノセウ」ャメムク�クトテ﨤ニサ゚ヤンハアイサソノモテ。」

    heyMackie
    heyMackie 2013/05/04
    font-familyの設定ツール
  • CSS(スタイルシート)の基本、小技、テクニック総まとめ

    CSSの基や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集|Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番

    CSS(スタイルシート)の基本、小技、テクニック総まとめ
  • なぜリセットではなく Normalize.css を使うのか | Yomotsu net

    まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、末転倒な HTML まで

    なぜリセットではなく Normalize.css を使うのか | Yomotsu net
    heyMackie
    heyMackie 2013/02/25
    勉強しないとマジついてけない…。
  • Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して - くらげだらけ

    Webで開発をしていてたまに上がってくる問題として、テキストの改行についてあると思います。特にWebサービスのような編集者以外のユーザーがテキストを入力した任意のメッセージなどを表示する場合、改行に関して様々なトラブルが起きたりすることがあります。編集者(作り手側)の場合は適切な箇所で改行タグを入れたり、閲覧者が適切に読めるように文章を改変したりできるのですが、ユーザーにそこまで考慮させるのは難しいことです。 またWebサービスには他にもトラブルの原因となることがあります。Webは様々な環境で閲覧・使用することが可能だということです。PCや携帯、スマートフォン、タブレットなどのデバイスの差異ももちろんありますが、閲覧するソフトウェア(Webブラウザなど)によっても表示のされ方が異なってしまいます。 (できる範囲ではありますが)すべての環境でトラブルなく適切に表示するにはどうしたら良いか?

    Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して - くらげだらけ
  • CSSハック一覧

    2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技(?)です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので(Safariがのってない・IE8しかのってない。。等の理由で)、自分用メモ。「こんなやり方もある!」というのがあればコメントして教えてください! ↑私が10年以上利用している会計ソフト! Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h

    CSSハック一覧
  • CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css

    Normalize.cssって何? CSSリセットとは違うの? どうやって使うの? といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssサイト Normalize.cssのソース Normalize.cssのドキュメント Normal

  • 資料:日本のコーダーのfont-family指定 | ウェビンブログ

    CSS Nite LP9に関連するコーダーの、CSSのfont-familyプロパティを抜粋した一覧です。 » ウェビンブログの元記事へ戻る

    heyMackie
    heyMackie 2012/04/10
    注:LP9ccのソースなのでメイリオ指定になってる。
  • CSS Click Chart | CSS3 Browser Support and Information

    Can I Use ? Data on support for the default feature across the major browsers from caniuse.com.

    heyMackie
    heyMackie 2012/01/18
    CSS3のサンプルサイト。コピペで使えて便利‼
  • 俺の CSS リセット: 2011 冬

    年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違

    俺の CSS リセット: 2011 冬
  • 1