[B! css] mya3のブックマーク

mya3 id:mya3

cssに関するmya3のブックマーク (5)

はじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blog
こんにちは、NAVER UIT つしまです。 Less & Sass Advent calendar 2011の8日目です。これまでのAdvent calendarの記事で、SassやLessの概要、活用法などが見えてきました。今回は、「Lessは機能不十分そうだし、Sassオシ多いし、Sassを使いはじめようかな・・」と思っている方に向けてはじめてのCSSメタ言語はLessがおすすめというおはなしです。 Lessって？既にCSSとフレームワークとメタ言語(2日目記事)やLESS初心者向けのナニカ(4日目記事)でも紹介があったとおり、LessはCSSを記述するためのメタ言語です。ただ後発であるにも関わらず、SassにあるのにLessにない機能は結構あって、例えば、ifやforなどの制御文、extendが使用できなかったり、cssへの出力形式がSassほど選べなかったり・・
mya3 2011/12/08
css

Less

Sass
リンク
CSS display:inline-blockを活用する方法と注意点 | エンタープライズ | マイコミジャーナル
Robert’s talk Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。 Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インライン
mya3 2010/12/01
css
リンク
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化するこれは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出すレイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング表示確認うまく表示できない箇所の修正ヘッダー内のHTMLマークアップ CSSでヘッダー内の
mya3 2010/11/03
webデザイン

html

css
リンク
[ CSS ] pre でも改行を生かしたまま折り返す
pre 要素で囲んだ一行が長い場合、親要素の幅に収まりきらず、スクロールバーが出てしまいます。なんとか親要素の幅内で収めたい。で、適当な位置で改行するように、 pre { overflow: auto; white-space: normal; } なる CSS を追加したのですが、今度は、私が追加した任意の改行まで無くなってしまいました。調べてみると、下のようなコードを追加すると、改行を生かしたまま折り返してくれます。 pre { white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word;
mya3 2010/06/26
css
リンク
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリプログラマ「プログラムを更新しました」テスター「いきなりエラーがでますよ！動作確認したんですか！」プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」テスター「キャッシュをクリアしたらエラーがでなくなりました」テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、クライアント側のキャッシュの「common.css」が使用されて、サーバ側の変更が反映されない可能性があります。これをcssやjsにクエリー文字列を付加することで、「common.cs
mya3 2010/06/02
キャッシュの抑止方法

css
リンク
1