CSSではみ出した文字を省略する「text-overflow: ellipsis;」がいつの間にかPCでも使えるようになってた！ - tacamy--blog
領域をはみ出したときに三点リーダー（…）で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use CSS3 Text-overflowをみたら、めっちゃ対応してた！IEなんて6から対応してるし、Firefoxも7から使えるようになってた。 実際に書いてみたら、いつものこんな感じのコードで普通に使えました。 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 昔、JSでなんとかそれっぽくできないかみたいに、誰かががんばっていたのはなんだったのか。 わたしみたいに使えないと思い込んでて、意外としらない人いるかもしれないので、ブログに書いてみま
HTMLカラーコード
HTMLカラーピッカー 縦のスライドを動かしてカラーを選択し、左のマスをクリックして好きなカラーキャストのHTML カラーコードを入手します。 HTMLカラーコードの決まり 「この文字と数字の奇妙な組み合わせには何か意味があるのかな。」とお思いかもしれません。その通りです。このように決まっています。 HTMLコードのフォーマット 各HTMLコードには、「#」の記号と6つの文字や数字が含まれています。これらの数字は、16進法で表されています。例えば、16進法の「FF」は、10進法の255を表しています。 記号の意味 HTMLカラーコードにある最初の2つの記号は、赤色の濃さを表しています。00が最も薄く、FFが最も濃くなっています。3番目と4番目は緑色の濃さを、そして5番目と6番目は青色の濃さを表しています。ですから、赤、緑、青の濃さの組み合わせで、自分の望み通りの色をほぼ何でも作ることができ
CSSを解除する
このサイトでは共通のCSSを各ページに適用し、必要によってはページ内でCSSを上書きして使っています。 CSSをタグに設定すると、全てのタグに設定が行き渡ってしまいますが、HTMLのサンプルを作る場合、その見本部分ではCSSを解除する必要があります。 このように、CSSを設定したけれど、部分的に解除したい場合にプロパティを初期値に戻す方法があります。 スタイル設定 簡単なCSSを使って、共通のサンプルテキストを用意しましす。 サンプルテキスト .sample_text { color: #f00; font-size: 20pt; text-shadow: 2pt 2pt 2pt #09f; } <span class="sample_text">サンプルテキスト</span> <style>タグ内に、sample_textクラスを使ってテキストの色、文字サイズ、文字の影を設定しました。
PC/スマートフォンで背景画像を固定する - Cube Lilac
Web ページで背景画像を固定する場合、オーソドックスな方法は background-attachment プロパティを fixed に指定する事らしいのですが、この方法だと（PC で閲覧する分には問題ないのですが）手元の iPhone (iOS 5.1.1) では固定されませんでした。 /* この方法だと、iPhone（スマートフォン）で閲覧した時に背景画像が固定されない */ body { background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-attachment : fixed; background-size : 100% auto; /* 画面の幅に合わせて拡大・縮小 */ } そこで少しググってみ
セレクタの種類－CSSの基本
■セレクタの種類 スタイルを適用する対象を指定するセレクタ（selector）には以下のものがあります。 ブラウザの種類やバージョンによって対応していない場合があるので注意してください。 セレクタ一覧表 名前セレクタの書式スタイルを適用する対象使用例 要素型セレクタ
"display: block"なリンク - CSS Dencitie
よく、左そでにコンテンツの一覧を並べます。当サイトも例外ではありません。 当サイトはCSSを用いているのみであり、JavaScript等は用いておりません。しかし、ソースから見えるのは普通の ul と li 、それと a のみです。 このページでは、そのカラクリを簡単に紹介致します。完成型は以下の図のとおりです。 勉強する気のない人は、適当にコピーしてちゃっちゃと出ましょう。 メリット デザインにメリットというのも変な話ですが、幾つかあります。 まず、CSSそのものの利点ですが、プレーンでストリクトなHTML宜しく、ul、liとaのみですので、ソースがとても簡潔で、編集がとても楽だという点が上げられます。 また、お気付きの方もいらっしゃるでしょうが、行全体が選択範囲となっており、幾分アクセスしやすくなっております。 作ってみよう では、実際に一から作ってみましょう。 普通にHTMLを書きま
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
スタイルシートの a:hover と a:active の順序 - peanutsjamjam's diary
訳あって、スタイルシートについて調べています。 スタイルシートに動的疑似クラスを書く時の順序が重要であることはみんな知っていると思う。 復習 復習、こういう順序で書くべき。 a:link { color: red } a:visited { color: blue } a:hover { color: yellow } a:active { color: lime }こういう順序で書くべきではない。(「書いてもいいけど、たぶん、あなたの思った通りにはならないと思うよ」という意味で。) a:link { color: red } a:visited { color: blue } ? a:active { color: lime } ? a:hover { color: yellow }上のふたつの例では、最後の 2 行だけ、すなわち a:hover と a:active の順序だけが異なっ
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件
私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。 ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。 私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。 私自身、NetBeans IDE を使うようになってからサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSについての質問です。 ボックスからはみ出るものを制御するのに 通常はoverflowを使用すると思うのですが 希望するような動作ができません。…