cssに関する記事一覧

皆さんは「背景画像の上にもう一枚背景画像を乗せたい！」「グラデーションの上に背景画像を乗せたい！」という時、backgroundがうまく効かないってことがありませんか？

実際、自分が苦戦して色々調べてなんとか完成させたので、自分がやった失敗例とともにbackgroundの解説をしていきます！

早いもので入社して１ヶ月が経とうとしています。
ほぼほぼ初心者の自分が昔学んだことや先輩方から教えていただいたことを自分なりの解釈を交えて書いていきたいと思います。

今回は本体部分の記述を説明していきますが、前回の本体部分を書くまでに必要な記述を簡単におさらいして補足しながら解説していきます！

キャメルケース（camelcase）という記述方法をご存じでしょうか？私たちマークアップエンジニアはコーディング時にclassの命名をしますよね。おそらくだいたいの会社にそれぞれのルールがあると思いますが、弊社ではclass名を記述する際「キャメルケースで記述する」としています。
ルールを決めることで複数名で制作をおこなっても表記の統一をすることが出来るのですが、ルールがない場合は人によって記述方法にばらつきが出てきます。今回はなぜそんなことが起こってしまうのか？という点に着目してみたいと思います(｀・ω・´)

前回のモバイル対応　きほんの「き」では、モバイル対応の必要性と方法、対応の際に気を付けることについてご紹介しました。
今回からは「実践編」と題して、実際にどう対応させるのか？について説明していきます。

実践編の第一回目は「viewport」「メディアクエリ」「ブレイクポイント」についてです。
イマイチつかみづらいテーマですが、モバイル対応には必須のスキルなのでじっくり取り組んでみましょう。

「tableレイアウトなんて、オラもう覚えただ！　余裕だべ」と思っている駆け出しマークアップエンジニアのそこのキミ！、必見?

もしかして非効率な組み方になってないけ？

知ってる人には当たり前だけど、意外にやりがちな組み方ともっと効率の良い書き方を書いていくだ！

みなさん、モバイル対応してますか？今はスマホやタブレットといっても多種多様なので、どの端末にも最適化させるのは至難の業ですよね。
私も、どこから手を付けて良いのやら…と気が遠くなる思いを何度もしています。

そんなわけで今回は備忘録がてら、スマホ＆タブレット対応の際のポイントを数回に分けてご紹介したいと思います。

css3の登場で、我々マークアップエンジニアもずいぶんと簡単に「動き」を付けることが出来るようになりました。
css3は本当に楽しいです(｀・ω・´)
今回はそんなcss3より、transition（トランジション）という時間の変化を操るプロパティの使い方をメモしたいと思います。
時間の変化というと想像しにくいのですが、実は当ブログでも右ナビのボタン群にはすべて指定してあって、オンマウス時に少しほわっと切り替わる感じがすると思います。パキっじゃなく、ほわんっ！これがtransition！ぜひ試してみてください！

前回の『画像は一切つかわずにcss3で鏡餅を描く①』の後、近日第二部UP予定と書いておりましたが…ずいぶん時間が空いてしまいました。

「既に鏡餅のシーズンなんて終わってしまったんですよ～」
『なぁにぃ！？　やっちまったな！』

男は黙って、記事UP！（すみません）

と言うことで第二部、はじまりはじまり～

以前ラジオボタン、チェックボックス、セレクトボックスの用途についてメモしました。同じラジオボタンでもブラウザによってデザインが多少違うのも確認出来たかと思います。がしかし、最近のサイトはみんなおしゃれに装飾されていますよね。クリックやタップし易いように大きくなっていたり、色がついて分かり易くしてあったりと。
ウチのサイトもそれぞれサイトにあったデザインをするようになり、実装し始めた次第であります。ブラウザ対応が必要な部分もありますが、サイトのデザインに馴染んだボタンを設置できるのでぜひともマスターしたいところなのです。
装飾にはいろいろなやり方がありますが、今回は「オリジナル画像」を使っての装飾にラッスンゴレライしてみたいとおもいます(｀・ω・´)
きれいに装飾してリッチなデザインにしてやりましょう！

当ブログでも他のメンバーが正しいCSSの記述や詳しい解説をたくさん書いてくれていますが、中には「はて、これ何に使うんだろう？？？」というCSSのプロパティもあります。

私もCSSをつかってお仕事をするようになってから結構な年月が経ちますが、いまだに「こんなの見たことない」というものが結構あります。

恐らく普段の作業で使わないんだから、「使わなくても大丈夫」なものがほとんどなんでしょうけど、今回はそれらをちょいと掘り起こして、少しだけ外の光を当ててあげることにしましょう。

ということで、興味深いものを調べてみたですが、「音声スタイルシート」と呼ばれる音声読み上げに使用されるプロパティが意外とたくさんありました。 CSS2.1の段階で使われなくなったものがほとんどなのですが、なかなか興味深いです。

前回の『cssで鏡餅を描いてみる』の回で次回プチテクニックの解説を書くと予告しました。

何の役に立つかわかりませんが、cssで鏡餅を描くための解説をしていきたいと思います。
今回は長編になりそうなので、2回に分けてお送りいたします。

それでは第一部、はじまりはじまり～

ラジオボタン、チェックボックス、セレクトボックス。
フォームを作成する上で「選択項目」ってよく使用しますよね。しかしどれを使うのが正しいのか、どんなことが出来るのか、そのあたりを一度自分でも確認したいなーと思いました。

終盤では「label要素」を使用してユーザビリティを高める方法もメモしました。
スマートフォンではクリック領域が狭いとなかなか選択できなかったり、誤タップによって意図しない項目が選ばれたりしますよね。
使いにくいじゃないか！もう！なんて日だ！なんてことになったらフォームだけでなく、サイトそのものから離脱されてしまう原因にも…。
選択項目に関して整理したいと思います(｀・ω・´)
※ちなみに「セレクトボックス」というのは分かりやすさ重視であり、正しい名称ではないそうです

昔は、テーブルレイアウトと言って、tableタグをたくさん使用してデザインしているサイトも多かったのですが、今はCSSも普及して、デザインのためだけにtableタグを使うことも減り、HTMLを使用したメルマガ等以外では、ほとんど見かけなくなりました。※おまけコラムをチェック

そんなあまり使用されなくなったtableタグ、いざ使うとなると、普段利用しているタグとは異なった性質があり、CSSでのデザインに困ることもあるかと思います。今回は、表組（テーブル）を配置してデザインする時に使用できるCSSプロパティ「border-collapse」「table-layout」「empty-cells」を実例と共にご紹介します！

divなどのboxのレイアウトは、値を変えようとすると何かと四苦八苦しますよね。
今回は柔軟なレイアウトを組むことができるプロパティbox-sizingがテーマです。

「とにかくもうboxサイズの微調整に悩まされたくないんだ…」そんなあなたはぜひご一読ください。

東京もだいぶ寒くなってきました。
風邪はひいてませんか？

さて、opacityを使ったボタンのhover時の動作でも紹介した様に opacityを使えば要素を半透明にすることができますが、要素全部が半透明になってしまいます。

違う違う、そうじゃ、そうじゃない！
テキストは半透明にしたくないんだ！
今回はそんな時に使える方法を書いてみます。

以前の記事「brタグはdisplay:none;で消せる」でbrタグがdisplay:noneで消せるというのを実験してみましたが、イマイチ使いどころが…。
今日は実際に便利だったな～と感じた事例をもとに見ていきたいと思います。

CSSの中に「text-indent」というのがあります。
これ結構使えるので正統派の使い方とその応用編を今回ご紹介します。

どうしてもボタンに画像を使いたい！　さらにボタンのhover時の見た目を変えたい！

そんな時皆様ならどうやって作りますか？

もちろん！テキスト画像置換をする時にチェックしたいことで紹介された方法もありますが、今回はOpacityを使った方法を紹介します。

プロのコーダーとして、正しいマークアップは常に意識しておきたいものですが、中には白黒はっきりせず、グレーな手法も存在します。
テキストの画像置換もそのうちの一つであり、使い方を誤るとGoogleからスパム行為とみなされ、警告を受ける場合もあります。
今回は、そんなリスクを最小限に減らすために画像置換を使用する上で気を付けたいこと、またその代替案についてご紹介します。

displayプロパティを使用して要素の表示形式を変更することができますが、今回はタイトルの通りnoneを指定するとbr改行はなかったことに出来る…という事実を知ってしまった私のこの感動をお届けいたします（笑）

CSS3を使って、いろいろなものを((( ；ﾟДﾟ))ﾌﾞﾙﾌﾞﾙふるわせてみました！ソース解説付き

※ Chrome, Firefox対応。IE10以上対応。

今回の記事は、HTMLタグの分類。ブロック要素とインライン要素の追加レポートです。

先日、上記の記事について「インライン要素はpadding上下で余白がとれる気がします。」というコメントを頂きました（コメントありがとうございます！）。本当に…!? とドキドキしつつ、背景色を付けた状態で、見てみると、あれれ…確かにpaddingを取ったところに背景色がついている…? ということで、今回は、インライン要素とpaddingの微妙な関係について徹底検証いたします！

サイトトップなどに記事の一覧がある時。
日付があってタイトルがあって、そのタイトルが長すぎる場合はCSS先輩が強引に「…」に置き換えてくれる素敵な記述の話しを以前書きました。

じゃ、その前になんですが、その日付とタイトルが一覧で並ぶ素敵な組み方はどういうのだろう…というのが今回のお話しです。

相変わらず、傍若無人なCSS先輩ですがじつは先輩、マークアップとしてちゃんとHTMLのことを考えてくれています。

均等な角丸じゃなくて崩れたものが作りたい！

デザイナーさんが作ってきたデザインが、角丸が引き伸ばされててどうやってかけば！？

そんなときに使える意外に知らない人が多い、水平・垂直方向のまるまりかたの違うborder-radiusの書き方があるんです。

シンプルに見えて意外と難しいのが「上下中央配置」。
並べる要素の高さが同じ場合は何とかやり過ごせますが、異なる高さの要素や、画像＋テキストという組み合わせを上下中央に配置したい場面に出くわすこともよくあります。
そんな時、スムーズに解決できる記述方法をご紹介します。

この範囲に文字を収めたいけど一文字収まらない！改行して2段にしなきゃ…なんて惜しい経験ありませんか？
そんな時に便利な文字と文字の間を詰めることが出来る「letter-spacing」というcssプロパティについて解説します。
レイアウトを崩さなくてもletter-spacingを使って解決できる場合があるので知っておくと便利です。

ウェブサイトは生き物です。
例えば記事の一覧があったとして、ずらっと並ぶタイトルが1行だったり2行だったりしたら。
「ちょっとバランス悪いなぁ。」
と、いうときにちょっと使える「text-overflow」について。

横並びの要素を作りたいけど、何行になるかわからない！

floatを使えばできるけど、3つ目だけ余白を変えなきゃいけない… classを付ければ簡単だけど、システム屋さんにプログラムを組んでもらって吐き出さなきゃいけないし… 3（さぁ～ん♪ナベアツ風に）の倍数だけ、classを付けてくれなんて…言いづらい！

「3つ目のところだけ消して、後の奴詰めておいてー！」

そんな依頼あったりしませんか？今回はそんなお悩みを解決？できるプチテクニックを記載します

floatを初めて知ったあとしばらくついつい楽しくてfloatを乱用してしまう、 そんな状態の方を「フローター」と呼ぶ方が多いです。（すみません）

clearfixだらけになってる！
clearするのが大変！
あのブラウザで崩れちゃってる！

そんな問題をちょっぴり減らせるかもしれない記述を書いてみます。

サイトの運用ではしばしば見栄えを変更しなければならなくなった時、元の記述に上書きをすることになりますね。
「記述自体は間違っていないのにcssが適用されない(・3・)」
そんな謎解きから早く抜け出すためにも、 cssの優先度を決定する「詳細度」という概念を覚えておくと便利です。