[B! css] u-chanのブックマーク

もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。﹁日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。﹂﹁Webで文字詰めだと？無理なんだよあきらめな！﹂なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

u-chan 2017/11/21

久しぶりに、スタイルシートのTipsを読んでしまった。

CSS
design

リンク

.htaccess の書き方

.htaccess とは.htaccess のルールファイル名コメントアウト文字コードと改行httpd.conf転送と有効範囲正規表現Apache のモジュールと .htaccess で利用可能なディレクティブモジュールとディレクティブ一覧HTTP環境変数後方参照RewriteRuleの後方参照RewriteCondの後方参照まとめ.htaccess とは[1] Apache HTTP Server Webサーバソフトウェアが "Apache" である必要があります。 .htaccess とは、Webサーバの動作を制御するための設定ファイル [1] です。設定例としては、特定のファイルやディレクトリのアクセスを禁止したり、HTTP 404(Not Found：未検出)エラーページをカスタマイズすることもできます。.htaccess は設置しなくともWebサイトは問題なく動作しますが、セキュ

u-chan 2015/05/15

今更、この話題で盛り上がってるとは...。

リンク

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference

理解しておきたい、CSSによるインラインレイアウトの仕組み︵font-size／line-height編︶Inline Layout─Frontrend Conference 高津戸壮︵株式会社ピクセルグリッド︶この記事は、Frontrend Conferenceのセッション﹁Inline layout﹂でお話させていただいた内容を基に、連載記事︵全4回︶として書き起こしたものです。今回は第1回目です。はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚

u-chan 2015/03/05

line-heightとか、懐かしい。最近、cssトンと触んなくなったなぁ...。

css
design

リンク

CSS(スタイルシート)の基本、小技、テクニック総まとめ

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

u-chan 2013/03/25

css

リンク

総務省、縦書きレイアウトを国際標準化 - MSN産経ニュース

次世代のインターネット閲覧ソフト︵ブラウザー︶に適用される縦書きレイアウトの国際標準化に向け、総務省が民間企業と検討を進めていることが10日、分かった。今月末にブラウザー開発業者などと検討会を開き、問題点を議論。年内にインターネット技術の国際標準化団体での最終草案作りと、ブラウザーへの実装を目指す。　縦書きレイアウトは日本を中心にモンゴルや台湾、中国、韓国などでも使われており、台湾や韓国とは標準化に向けて協力していくことで合意している。国内では次世代ブラウザーだけでなく、デジタルサイネージ︵電子看板︶、電子書籍などに適用される。漫画などの日本文化を世界に伝えやすくなるほか、﹁災害時に、より見やすい形で電子媒体で情報を伝えられる﹂︵総務省担当者︶という。　これまで横書きから縦書きに変換した場合に意味が変わる矢印などの記号の扱いや、文字間の調整など細かな仕組み作りなどを議論。すでにある程度まで

u-chan 2012/09/11

これは大事なこと。

リンク

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。私は Javascript が苦手で、jQuery もどちらかというと苦

u-chan 2011/10/12

リンク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版﹁Selectivizr﹂で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

u-chan 2011/06/16

助かる。㌧クス。

リンク

IDEA * IDEA

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

u-chan 2011/06/16

生きてて良かった...(笑)。

リンク

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、﹁IE6がー！﹂とか﹁IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変﹂などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML5や IE 8 Beta 2 のモードスイッチなどの情報も含

u-chan 2011/06/07

結局、IEが元凶なんだよな...。

リンク

「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント

☆ご注意☆ この記事は 2011年5月29日に書いたものです。情報が古い可能性がありますのでご注意ください。今も素人にちょびっっっとだけ毛が生えた程度ですが、少しだけわかるようになりました。毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、﹁んーーーなんかこのへん素人っぽいね﹂と言われた事があります。素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。就職はできたものの、技術は完全ど素人なので。今も素人にちょびっっっとだけ毛が生えた程度ですが、少しだけわかるようになりました。﹁素人っぽい﹂の意味が。毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ

u-chan 2011/05/31

これだけ心がけてても、なかなかうまくいかないもんだけどね。

リンク

高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス

u-chan 2010/12/02

リンク

Firebugの使い方 | THE HAM MEDIA

Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン﹃Firebug﹄。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会︵SaCSS︶にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。もちろん﹁そんな機能知ってるよ！﹂というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認

u-chan 2010/06/28

リンク

W3C CSS 検証サービス

URLで指定して検証検証したい文書(CSSと組み合わせたHTML文書、もしくはCSS単体の文書)のURIを入力してください: アドレス: オプション

u-chan 2010/06/14

css
w3c

リンク

より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net

cssやプログラミングマークアップをより早く Web制作を少しでも効率化しようと思って︵今更︶いろいろ便利そうな情報を探しました。既に使っている情報の方が多かったのですが、折角調べたのでシェアしたいと思ってエントリーです。 Web制作を少しでも効率化しようと思って︵今更︶いろいろ便利そうな情報を探しました。既に使っている情報の方が多かったのですが、折角調べたのでシェアしたいと思ってエントリーです。コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding︵本家︶HTMLコーディングが3倍速くなる？﹁Zen-Coding﹂秀丸Zen- Codingマクロコーディングの効率化を図

u-chan 2010/06/11

css
html

リンク

http://zaru.tofu-kun.org/2010/04/22/css/

u-chan 2010/04/23

css

リンク

CSSを最適化する3つのツール | エンタープライズ | マイコミジャーナル

Make TechEasier - Uncomplicating the complicated, making life easier WebサイトやWebページ、WebアプリケーションにとってCSSはデザインを実現する中核技術となっている。このCSSを最適化する3つのツールが3 Useful Tools To Optimize your Blog’s CSS - Make TechEasierにおいて紹介されている。紹介記事そのものはブログで利用されるCSSを取り出して最適化するストーリーになっているが、汎用的なテクニックとして利用できる。紹介されているテクニックとツールは次のとおり。 CSSファイル編集テクニック CSSはHTML内部に記述するのではなく外部ファイルにまとめる属性に繰り返し同じ設定を記載するのではなく、クラスとして定義して利用するようにする。たとえば複数のクラス

u-chan 2010/02/11

css

リンク

スタイルシートの技

スタイルシートの技このページでは実用的なスタイルシートによるデザイン・レイアウトなどをメインに扱っております。スタイルシートをサブで使うかメインとするかは賛否両論あります。また、世の中にスタイルシート解説サイトは多数あると思いますが、スタイルシートの持つ意味を誤解しているサイトが少なからずあるのと、リファレンスのような書き方ではデザインへの応用が効かないのでは？という事を考えて、すぐに利用できる実用的な形式で参考になればと思って作成しました。スタイルシートを勉強すると、当サイトの一番下にある「design」のように、 Javascriptと併用したデザイン切り替えページなどを製作する事ができるようになり、表現の幅が広がります！自分のスタイルシートの知識を簡単にテストできる問題を作ってみましたので、どうぞ。 Introduction - 基礎・導入編

u-chan 2010/02/11

リンク

cssの情報・まとめ

cssの情報まとめです。ローカル環境にストックしていた情報を開放してみますのでシェアして頂ければ幸いです。内容は結構偏っていると思いますので参考程度になさってください。全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of

u-chan 2010/01/21

リンク

CSS のみで吹き出し

hail2u.net - Weblog - Pure CSS な吹き出しに触発されて、画像や JavaScript を使わずに CSS だけを使って﹁吹き出し﹂を作る方法を僕も考えてみた。Demo: CSS のみで吹き出しマークアップは2重の要素があればOK。ここではそれぞれ bubbleと body というクラスを付与した div とpを例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom