htmlに関する記事一覧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

web上で技術者向けにソースコードを公開しているブログの多くが「SyntaxHighlighter」を導入し、HTML、CSS、JavaScriptなど様々な言語のソースを見やすく公開しています。よく見かけますよね？うちでももちろん導入しています！
見やすいソースコードを公開できるだけでなく、長ーいソースをダブルクリックでまるっとコピー出来たり、重要な行をハイライトさせることも出来ます。なんて便利なものがあるんだ！
ということで今回は基本的な導入方法と実際の記述の仕方をメモしていきたいと思います。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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