マークアップ・コーディングに関する記事一覧

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

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

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

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

入社して間もないしんちゃんです！HTMLは大学で少しかじった程度なので、チームの皆様にご指導いただき日々精進している所存です。いち早く皆様のお役に立てるよう頑張りたいと思います！

HTMLを始めて最初に学び、最初に書くDOCTYPE宣言ですが、最初は暗号にしか見えずHTMLを学ぶ気力を無くす原因のひとつでした。
先生に「DOCTYPEってどういう意味ですか？」「この暗号はなんですか？」と聞いても「こういうもんだから」「宣言文だから。」「始まりの呪文みたいなもん。」と答えられていまいち納得できずうやむやに…。
そこで、しょっぱなから挫折した、勉強したいけど抵抗があるという人のためにも入り口を広げてあげようという内容です。

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

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

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

ご存知の方、そして対応済みの方も多いかと思いますが、古いバージョンのFacebookのいいね！ボタンが2015年5月以降は動かなくなるようです。はい、もう適用されるまで数日しかないのです。
はっ！忘れてた！と思い出した方、まだ対策がお済みでない方、対応方法をメモしましたのでさくっと修正してしまいましょう！
とても簡単です(｀・ω・´)

どうも、ぴえーるです。
前回の「【jQuery】要素セレクタについて・その1」の最後に「あれ、これってCSSの指定の仕方に似てますやん。」ということに気がついたかと思います。
はい、そうなんです、似てるんです。
（実際はCSSの指定がJSに寄って行っているのかもしれませんが）

ということで、少しだけフレンドリーになった気がするjQuery先生の要素セレクタについて今回も引き続き始めます。

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

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

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

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

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

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

だいぶ前に（笑）天下の「jQuery先生」をお勉強し始めるにあたっての記事を書きましたが、今回から不定期ではありますがもう少し踏み込んで「jQuery先生」に関してご紹介してみようと思います。

そして、最近「ちょっとカッコエエやないの？」と一部で話題のHTML、CSS、JSのコード共有サービス「CODEPEN」を今回から導入してみることにしました。

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

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

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

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

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

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

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

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

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

HTMLの基本的な特徴を知って、スラスラとHTMLが記述できるHTML脳を作りましょう！

今回の記事では、HTMLとは？ということで、「マークアップ言語」と「ハイパーテキスト・ハイパーリンク」についてお話します。HTMLの特徴を理解することによって、このときはどんなタグを使ったらいいんだろう？という疑問を減らし、適切なマークアップでHTMLをスラスラと書けるようになりましょう！

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

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

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

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

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

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

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

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

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

Chromeでデバッグ！～デベロッパーツールの使い方～では、デベロッパーツールの画面構成についてご紹介いたしました。今回は、CSSの編集の仕方とJSの実行の仕方をご紹介いたします。

書いたCSSが反映されていない！？ちょっとこのCSS試してみたいんだけどどうなるんだろう？JavaScriptはちゃんと動いている？エラー出てないかな？などなど、Chromeデベロッパーツールが最も活躍するシーンのご紹介です！

ページをスルスルッと最上部までスクロールしたり、ステキなスライドショーがフワッと浮かび上がってきたり、はたまたスクロールするとイラストが妖しく動いたり…。
「これって…！？」と思われる気持ちのいいサイトには大体入っている「jQuery」。

デザイナーさんも最近では「では、ここいらへんの動きはjQueryでお願いします。」なんてサラッと言っちゃうシーンが増えてきましたが、まだまだ「これから勉強しよう！」と思っている人も多いかと思います。

ということで、今回はそのお勉強のとっかかりとなる入口の序の口のちょっと手前のことを書こうと思います。

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

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

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

コーディングをする時に必ず一回は「このコードの記述、何だっけ…」と悩んでいませんか？

初心者のうちはひたすらコードを手打ちして体にしみこませることも重要！ですが、実業務においてはやたらと長～い記述にあまり時間をかけずに効率化を目指すのも大切です。
これらのコードを毎回調べる手間を省き、さくさくコーディングできる方法をお伝えします。

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

デバッグとは、バグと呼ばれる欠陥を発見し、修正することです。

HTMLやCSSを書き始めた頃は、何が問題なのかを発見することも、どうやって直すのかも手探り状態であれやこれやとやってみては修正、やってみては修正をたくさん繰り返していました。

今回は、表示がおかしい原因をより簡単に見つけるためにChromeのブラウザ上で直接HTMLやCSSを修正したり、JSを実行することができる、デベロッパーツールの使い方をご紹介いたします。

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を使って解決できる場合があるので知っておくと便利です。

HTMLを書いているときに、タグによって、改行されるものやそのまま続くもの、次の行に続けて書くと改行されないけど行間にスペースが開いてしまうものなど、様々なタイプのタグがあることに気づくと思います。HTMLのタグにはどのような特徴があるのか？今回は、たくさんあるHTMLのタグを2つのタイプ「ブロック要素」「インライン要素」に分けてそれぞれの特徴について考えたいと思います。

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

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

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

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

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

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

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

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