HTML&CSS

HTML&CSS

【HTML5】sectionとarticleの使い方・違いについて、Webサイトの使用実例から考えてみる

こんにちは!ケインコスゲ(@keinkosuge)です。 今日はHTMLのお話です。お題は「sectionとarticleの違い・使い分け」についてです. HTML5が正式勧告されてから、このブログの初稿を書いている時点で4年ほ...
HTML&CSS

YoutubeやGoogle Mapsのiframe埋め込みをレスポンシブ対応させる方法!どこよりもわかる理由まで解説!

YoutubeやGoogle Mapsの埋め込みをWebサイトに設置したいとき、ありますよね。 2018年6月、Google Maps APIの料金体型に変化が生じたことにより、今後Google Mapsに関しては特にifra...
HTML&CSS

SVGファイルの取り扱い方入門・表示から作成までをひとまとめに学ぶ

WEBサイトを閲覧するためのデバイスがPCやスマートフォント・タブレッドなど多様化し、Retina Displayに代表される高解像度モニタも、2倍の解像度だけでなく3倍の解像度になるものも近年は出現し、WEBサイトのマルチデバイス対応はま...
HTML&CSS

ショートカットで覚えるGoogle Chromeデベロッパーツールの使い方・ HTML&CSS編

HTMLやCSS、JavaScriptを使ってWeb制作・開発をするときに、なくてはならないのがデベロッパー(検証)ツール。 実際に自分が書いたCSSがどういう状態で適用されているのかを確認するときなどに非常に便利で、もはやWeb制作...
HTML&CSS

CSSがうまく効かない5つのパターンとは?原因の見つけ方や対処法も紹介

HTMLやCSSの学習をしていると、「CSSが思った通りに効かない・・・」ということってよくありますよね。 特に、学びたてのときは、CSSレイアウトあたりで苦戦することも多いです。 でも、CSSがうまく効かない原因って実は5つのパタ...
HTML&CSS

font-smoothingでフォントのアンチエイリアスを調整!スタイリッシュな見栄えも可能

色々なWEBサイトを見ていると、フォントがなんだか太いな・・・野暮ったいな・・・なんてことを思う時はありませんか? そんな時は、フォントのアンチエイリアス設定がなされていないことが多いのです。 僕も元々知っていたCSSのfont-s...