タグ

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

タグの絞り込みを解除

CSSとCSS3に関するhidex7777のブックマーク (19)

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


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

  • phiary

    今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

    phiary

  • [CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック


    シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 <div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> ギザギザを一つにした最小限のセットは、こんな感じです。 <div class="jagged-wrap-inner"> <div class="offse
    [CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック

  • 参考にしたいCSSでできるテーブルデザイン10選


    こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co.uk/csstablegallery/tables/42.php 黒を基調に、リンクに青色を使っているテーブルです。 英語だからいいのかもしれないのですがスタイリッシュなテーブルです。 Casablanca http://icant.co.uk/csstablegallery/tables/71.php グレーと赤を使ったテーブル。色
    参考にしたいCSSでできるテーブルデザイン10選

  • CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld


    実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ︵特にIE7・IE8など︶によっては動きや見栄えが説明と異なる場合があ
    CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld

  • 紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech


    印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも﹁こんな文字のレイアウトはWebだと無理？﹂といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次‥段組み縦組み︵縦書き︶行末揃え︵両端揃え︶先頭文字スタイル︵ドロップキャップ︶段落先頭1字下げ2行目から1字下げ︵ぶら下げインデント︶行頭禁則文字ふりがな︵ルビ︶圏点︵傍点、脇点︶大文字と小文字の変更スモールキャップス︵スモールキャピタル︶長体、平体︵水平比率、垂直比率︶※IE以外のブラウザは、2014年7月4日現在の最新版にて
    紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech

  • CSSのみで実装するキャプションエフェクト 20 - NxWorld


    自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に﹁もっと見る﹂のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
    CSSのみで実装するキャプションエフェクト 20 - NxWorld

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


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

  • IE8から始めるテーブルレイアウト と IE10からのFlexible Box


    IE8から始めるテーブルレイアウト と IE10からのFlexible Box 2012-11-08 テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display display: table; はCSS2.0からある仕様です。 要素をCSSでテーブルのようにあしらうことができるため、多くの利点があります。 display: table; display: table;はIE8以降のtable要素に、デフォルトスタイルシートで定義されているものです。 IE8からサポートされているのでIE7以下を切り捨てれば、今からでも使うことができます。 display: table;以外にも多くの値が存在し、tableを形作る要素に振り分けられています。 以下は、tableに振り分けられているCSS
    IE8から始めるテーブルレイアウト と IE10からのFlexible Box

  • [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box | Cappee Design


    あとで読みたい人は… こんにちは、@cappeeです。 サイトを3カラムで作る場合は通常floatを使いますよね？ 今回は意外と知らないCSS？かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。 display:box とは CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。 もうfloatのclearになんか悩まされることもありません。 display:box のすごいところは、横並びでレイアウトしたい要素の﹁親要素﹂にだけ記述すれば勝手に横並びにしてくれます。 プレフィックスを入れてもたった2行でできてしまうのです。 Flexible Box︵フレキシブルボックス︶とも言います。 display:box の記述方法 #contents の中に横並びにしたい要素を入れたとします。 下記の2行を追加す

  • [CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック


    hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side LinesHTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo

  • スマートフォンサイト制作時に覚えておきたいCSS 15


    スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは﹁スマートフォンサイト制作時﹂としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
    スマートフォンサイト制作時に覚えておきたいCSS 15

  • Useful CSS Text Effects

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

    Useful CSS Text Effects

  • 2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013

    当ブログでもお馴染みのCodePenから、スタイルシートやスクリプトを使って実装された2013年にもっとも人気のあったスゴイデモを紹介します。 Top Pens of 2013 Top Pens of 2013はベスト100が掲載されており、どれも見応え十分のワクワクするクリエイティブな作品ばかりですが、その中からトップ10を紹介します。

  • 5分でわかるスタイルシート講座


    それから、CSSでもテキストエディタを使います。 HTML編でも述べたように、Windowsの﹁メモ帳﹂やMacの﹁テキストエディット﹂は、HTMLやCSSのような︵それからJavaScriptなどのプログラミング言語も︶、厳密に規格が定義されたテキストを書くのには向いていません。 Windowsなら﹁EmEditor﹂、Macなら﹁Coda﹂をインストールしてくださいね。︻追記︼MacはEspressoの方がいいかも。詳しくはzen-codingの記事を読んでね！ これらのエディタは、再来週に書く予定の﹁5分でわかるzen-coding講座﹂に対応しています︵zen-codingとは、HTMLやCSSを書くスピードを10倍速くする、魔法の記述法です︶。 さて、いつものように前置きが長くなりました。 さっそく1分目、行ってみましょう。1分目‥﹁ディレクトリ﹂を知る、作る あなたのパソコン
    5分でわかるスタイルシート講座
    hidex7777
    hidex7777 2012/02/21
    CSS2.1とCSS3の使い分け。お疲れ様
    リンク

  • Browser CSS hacks - Paul Irish

    I don’t use CSS hacks anymore. Instead I use IE’s conditional comments to apply classes to the body tag. Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I’ve seen. Plus there’s no way to provide stylesheets to only Safari, I believe. With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the css. So here are go: 2

  • HTML5でモダンブラウザのCSS3バグを回避するためのハック方法 | ゆっくりと…


    将来、何かの役に立つかもしれないので、メモとしてエントリー。IEなんかの古いブラウザに対応するための CSS ハック方法は古くから知られていますが、CSS3への過渡期の現在、︵本当は使いたくない︶ベンダー・プレフィックスや Modernizr なんかを使って新しいデザインにチャレンジしている人も多いことでしょう。 それでもなお、特定ブラウザの、特定バージョンで思った通りのデザインにならないことがあれば、やはり何かしらのハックに頼らざるを得ない状況は、今も昔も変わらないのかもしれません。 そんな場合のハックをAnHTML5 boilerplate addon for CSS browser nitpicks から紹介です。紹介されているテクニックは、従来型の CSS 解釈時バグや CSS 属性のアリ／ナシといった特徴や機能ベースではなく、そのものズバリ、ユーザーエージェントによるブラ

  • Scout-App - Site has moved

    Scout-App, the easiest way to use Sass!

  • Sass: Syntactically Awesome Style Sheets

    Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work

  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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