HTML&CSS

HTML&CSS

borderについて「へぇー」と思ったこと

こんにちは、ゆんつです。 CSSの勉強をしていてborderに関して ゆんつ へぇー と思ったことがありました。 今日はそのborderに関して「へぇー」と思ったことについて書きます ...
HTML&CSS

左から右から、中央からにょろ~ん

こんにちは、ゆんつです。 リンクにマウスカーソルを乗っけたときのアニメーションにはいろんなものがあります そのようなアニメーションの中で良く見かけるのが、リンクにマウスカーソルを乗っけると左側からにょろ~んと下線が伸びるアニメー...
HTML&CSS

テキストが要素を突き抜けていく原因と解決法

こんにちは、ゆんつです。 この前こんな事態に遭遇しました。 ブロック要素の中に日本語で文字をズラッと入れていくと 何もしなくても要素の端で折り返されて、ブロック要素内に表示されます。 ところが半角英語にすると...
HTML&CSS

画像の高さと親要素の高さが一致せず、空白が出来る時は

こんにちは、ゆんつです。 HTMLで親要素の中に子要素としてimg要素を入れた時。 親要素にも子要素にもheightを設定しなければ、親要素と子要素の高さはピッタリになるはずだと思っていました。 ゆんつ ...
HTML&CSS

疑似要素にFontAwsomeが表示されない時は!

こんにちは、ゆんつです。 Webページにちょっとしたアイコンを表示させたい場合。 Font Awesomeを使うと手軽で綺麗にアイコンを表示させることが出来ます。 例えばツイッターの鳥のマークなんかも、 こん...
HTML&CSS

tableタグを使って表を作る

こんにちは、ゆんつです。 HTMLにtableという表を作るためのタグがあります。 表というと僕は真っ先にエクセルで作ったこんな表を連想します。 こんな感じの表がtableタグとその関連のタグを使うことでWEBペー...
HTML&CSS

text-align:center;とmargin: 0 auto;について

こんにちは、ゆんつです。 CSSで画面中央に文字を配置するセンタリングをしたい場合。 text-align: centerを使うことが一般的だと思います。 でも時と場合によっては、text-align:centerではセン...
HTML&CSS

画像をピッタリくっつけたいのに余計な空白が出来る場合には

こんにちは、ゆんつです。 この前HTMLとCSSを書いていて、こんなケースに遭遇しました。 ここに2枚画像があります。   この2枚の画像を隙間なくピッタリと横並びにしたいのです。 普通にこんな感じのコードを書...
HTML&CSS

リンクが親要素一杯に広がったボタンを作る

こんにちは、ゆんつです。 Webページを閲覧していると、こんな感じのボタンをよく見かけます。 クリックすると、どこか別のページにジャンプしたり、同じページ内のどこかにジャンプしたりします。(このボタンは画像なのでクリック...
HTML&CSS

ちゃんと使おう見出しタグ

こんにちは、ゆんつです。 HTMLのタグにhタグというものがあります。 いわゆる「見出しタグ」といわれるものです。 僕は長らくこのhタグを文字の大きさを調節し、さらに文字を装飾するものだと思っていました。 ですのでブ...