HTML・CSS

Ruby

HTML、CSS、JavaScript、PHP、Python、Rubyコメントアウトやり方タグの書き方

コメントアウトは使い方を誤ると、・コードが動かなくなる・レイアウトが崩れる・バグの原因になる・最悪の場合、機密情報が全世界に丸見えになるといった深刻なトラブルを引き起こすことがあります。特にフロントエンド(HTML/CSS/JavaScript)のコメントアウトは情報漏えいの原因になります。HTML / CSS / JavaScript / PHP / Python / Rubyの複数行・一行コメントアウトやり方、コメントアウトタグの書き方、コメントアウト時の注意点まで徹底解説します。
HTML・CSS

CSS positionページトップボタン、スクロール追随ボタン、表見出し(ヘッダー)固定の作り方

CSS position(ポジション)を使って・画面右下にページトップボタンを固定する・スクロールしても追随する購入ボタンを画面下に固定する・長い表の見出し行(ヘッダー)をスクロール中も固定するUIを実装するユースケースを紹介します。「スクロールに合わせてUIをどう動かせばいいの?」「fixedとstickyはどう使い分ければいいの?」という疑問を解消します。
HTML・CSS

バッジ(ラベル)、モーダルウィンドウの作り方.CSS positionで作るUIデザインパーツ実装

CSS positionでの・画像右上に表示するバッジ(ラベル)の作り方・画面中央に表示するモーダルウィンドウの作り方を初心者にも分かりやすく解説します。UIデザインパーツの実装方法を通して「なぜその配置になるのか」という考え方もあわせて理解できるように解説します。
HTML・CSS

CSS position(ポジション)種類.static、relative、absolute、fixed、sticky使い方

CSSのpositionプロパティの種類(static、relative、absolute、fixed、sticky)と基本的な使い方、実務でよく使うユースケースについて解説します。Webサイトを作っていると「要素を特定の位置に固定したい」「他の要素と重ねて表示したい」「スクロールしても常に画面上部に表示させたい」といった対応が必要になる場面がありますが、HTMLの構造を変えずにCSSだけで要素の配置を細かくコントロールできるのがpositionプロパティです。
HTML・CSS

CSS擬似要素とは?before、after、ホーバー、first-lineなど擬似要素の使い方

Webサイトの「テキストの前にアイコンを付けたい」「見出しの左に装飾ラインを引きたい」などの時に活用したいのがCSSの擬似要素。擬似要素を利用すれば、CSSだけで要素の前後や特定の部分にスタイルを適用できます。CSSの代表的な擬似要素や基本的な使い方を解説します。
HTML・CSS

CSS擬似要素とは?CSSの代表的な擬似要素や基本的な使い方について解説

「テキストの前にアイコンを付けたい」「見出しの左に装飾ラインを引きたい」等の時、HTMLでもできますが見た目のために要素を増やすとコードが複雑になります。CSSの擬似要素を利用すれば、CSSだけで要素の前後や特定の部分にスタイルを適用できます。ここでは、CSS擬似要素とは何か?CSSの代表的な擬似要素や基本的な使い方について解説します。
HTML・CSS

ホームページの背景色、デザインをHTML、CSSで設定する方法

ホームページの印象を左右する背景色の設定はCSS必須スキルの一つです。単純に画面全体の背景色を設定するだけでなく要素を指定して色を付けることもで、デザインの幅が大きく広がります。ホームページの背景色、デザインをHTML、CSSで設定する方法や、背景色がうまく反映されないときの対処方法について解説します。
HTML・CSS

CSSで動的な文字の大きさ文字サイズ指定(VW、VH、CLAMP関数、メディアクエリ)方法

Webサイトの閲覧はPCたスマホ、タブレットなど多様なデバイスが使われるため、色々な閲覧環境を前提にWebサイトを設計する必要があります。CSSによる文字サイズの指定の応用編として画面に合わせて文字サイズを動的に変更(VW、VH、CLAMP関数、メディアクエリ)する方法を解説します。
HTML・CSS

WEBサイトCSSによる文字の大きさ文字サイズの指定、変更(数値と単位で指定、キーワードで指定)方法

誰もが読みやすいWebサイトを作る上で文字サイズは重要な要素です。CSSではさまざまな単位やキーワードを使って文字サイズを指定、変更(数値と単位で指定orキーワードで指定)できます。ここではCSSによる文字サイズの指定方法や単位の種類を分かりやすく解説します。
HTML・CSS

CSS(スタイルシート)どこに書く?HTMLにCSSを埋め込む方法、埋め込み方、設定方法

CSSはHTML文書の見た目をよくするために視覚的なデザインを定義します。HTMLをCSSに埋め込む方法にはHTMLファイル内に記述する方法とHTMLファイルとは独立したCSSファイルをリンクさせる方法があります。HTMLのCSSへの埋め込み方やCSSの基本的な設定方法を分かりやすく解説します。