2025年7月に投稿された記事一覧です。
spanタグはインライン要素で横並び、divタグはブロック要素で縦ならび。displayプロパティではそれらを自在に調整できます。 'display: block;' されている要素は、その行を丸々使うブロック要素となり、複数を並べると縦に並ぶことになります。 'display: inline;' されている要素は、その要素の長さや文字数が幅となり、複数を並べると横に並ぶことになりま...
SEOに強いホームページやWEBアプリにするためにNuxt.jsのSSGタイプを選択することは多いです。その場合のデプロイファイルは主に最終出力されたdistディレクトリ内となり複雑になってきます。 毎日のようにデプロイをするのなら自動化していきましょう❗ プロジェクト構造 ├── 🔧 設定ファイル│ ├── nuxt.config.js (メイン設定)│ ├── packag...
コードでデザインを表現することは複雑なので、まずは全体を把握していきましょう。 レイアウト display要素の法則を決めます。'block'にすると、その行を丸々使います。'inline'にすると、その要素の大きさ（長さや文字数）だけを使います。'flex'にすると、様々なことができます。'grid'にすると、様々なことができますが、flexより規則的です。 positio...
PHP（Hypertext Preprocessor）は、ホームページやWEBアプリ開発で利用されるスクリプト言語です。サーバーサイドで動作するので、逐一ネット通信が発生しますが、データベースにアクセスできるため必須の技術です。HTMLやJavascriptのようなフロントサイド言語はPHPのようなサーバーサイド言語を通してデータベースからデータを取得しているということです。 HTMLと相...
Wordpress、PHP、MySqlのバージョンを柔軟に変更できるDocker環境です。GitHUBにもリポジトリ公開しているので、クローンしたらすぐ使えますよ❗ ディレクトリ構成 / ├── .env # 環境変数ファイル ├── docker-compose.yml # Docker Compose設定 ├── plugins/ # WordPressプラグインマウントディレク...
コメントアウトは、コードの一部をプログラムに実行させないようにするために使用されます。これにより、コードの説明を加えたり、一時的にコードを無効にしたりすることができます。 CSS /* これはCSSのコメントです。 複数行にわたって記述できます。 ブラウザには適用されません。 */ Javascript // これはJavaScriptの単一行コメントです。 ...
HTMLには、見出しの重要度に応じてh1からh6までの6段階の見出しタグがあります。h1が最も重要で、h6が最も重要度が低い見出しです。これらのタグは、ブラウザで表示される際に、デフォルトでは自動的に太字になり、上下に余白ができますが、CSSでカスタムすることが通常です。 コード <!DOCTYPE html> <html lang="ja"> <head> ...
フォントの太さを指定するには、CSSの font-weight プロパティを使います。数値もしくは名前で指定します。 ただし、使用しているフォントが対応する太さを持っている場合にのみ有効です。フォントによっては、normal と bold しか用意されていないこともあります。 コード <!DOCTYPE html> <html lang="ja"> <hea...
フォントサイズ指定は様々あり、難しい法則のものもあります。下記コードをHTMLファイルとして保存し、ブラウザで開き、様々なデバイスサイズで試すことをお勧めします。 'vw'や'vh'、'rem'などのレスポンシブな振る舞いは理屈よりも見てみることで理解が深まります。 コード <!DOCTYPE html> <html lang="ja"> <head> ...
CSSでテキストの色を変えるには、'color'プロパティを使います。'text-color'や'font-color'ではないことに気を付けてください。主に3パターンの方法で色を指定できます。 コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <met...
