CSSスタイルシートとウェブレイアウト完全ガイド

CSSスタイルシート(カスケーディングスタイルシート) CSSの適用方法には主に3つの形式があります。 インラインスタイル <p style="color: red; font-size: 16px;"> この要素にはインラインスタイルが適用されています </p> 埋め込みスタイル <style> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back ...

6月28日 19:06 投稿

WeChatミニプログラムでのカスタムナビゲーションバー実装ガイド

1、app.jsonでカスタムナビゲーションを有効化 "window": { "navigationStyle": "custom" }, 2、app.jsでシステム情報を取得し、グローバル変数に保存 App({ onLaunch() { const instance = this; // システム情報の取得 const deviceInfo = wx.getSystemInfoSync(); // カプセルボタンの位置情報 const cap ...

6月27日 00:32 投稿

Vue.jsでマーキー(水平スクロール)コンポーネントを実装する方法

DOM操作とCSS Transformを使った基本的な実装 この方法は、テキストコンテンツをラップする要素のCSS transformプロパティを直接操作してスクロール効果を作成します。 テンプレート構造 <div class="marquee-container" ref="container"> <div class="scrolling-content" ref="content"> <p class="display-text">{{displayContent}}</p> ...

6月23日 21:32 投稿

UniApp 入門ガイド (Vue3 + TypeScript)

UniApp (Vue3 + TypeScript) 入門 1. プロジェクトのセットアップ 1.1 プロジェクトの作成と起動 # HBuilderXでの開発を推奨します # sass、TypeScriptなどの必要なプラグインは自動的にインストールされます # 注意: Viteは現在WeChatミニアプリをサポートしておらず、Vue3のテンプレートは複数ルートタグをサポートしていません npx degit dcloudio/uni-preset-vue#vite- ...

6月23日 21:19 投稿

CSS の主要スタイルプロパティと使い方

ボーダー(border) border プロパティは、要素の境界線を定義します。値は「幅・スタイル・色」の順で指定します。 コード例 <div style="border: 2px solid red">サンプル</div> <div style="border: 1px dotted green">サンプル</div> その他の基本プロパティ height: 要素の高さ(例: 100px) width: 要素の幅(例: 200px) font-siz ...

6月17日 23:05 投稿

HTMLフォーム要素の実践的応用

ログインフォームの作成 角丸デザインのログインフォームを作成する実装例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ログインフォーム</title> <style> .container { ...

6月11日 20:39 投稿

Reactの基本概念とJSXの実践ガイド

Reactの基本概念 Reactとは Reactは主要なフロントエンドフレームワークの一つで、アプリケーションはコンポーネントで構成されます。コンポーネントは独自のロジックと見た目を持つUIの一部であり、ボタンのような小さなものからページ全体まで様々な規模があります。 開発環境のセットアップ 手順1: プロジェクトの作成 コマンドラインで以下のコマンドを実行します: ...

6月6日 18:58 投稿

2024フロントエンド実習面接の技術要点まとめ

目次 CSS 1.CSSのレイアウト方式にはどのようなものがありますか? 2.Flexboxで左右レイアウトを実装する方法。 3.CSSの一般的な単位。 4.CSSでは何が継承されますか? 5.リフローと再描画について。 6.Flexboxレイアウトのプロパティ。 7.CSSのカスケードスタイルの優先順位ルール。 8.擬似クラスと擬似要素の違い。 9.ボックスモデルの種類。 10.要素の中央揃え方法。 11 ...

6月5日 16:26 投稿

Nginxのインストールとフロントエンドコードのデプロイメント、Windowsでのリフレッシュ時の404エラー対処

Nginxのインストールとフロントエンドコードのデプロイメントについて説明します。特にWindows環境でページリフレッシュ時に発生する404エラーの解決方法も紹介します。 1. Nginxのインストール 1.1 Windows ダウンロードURL: Nginx公式サイト 安定版をダウンロードすることをお勧めします。 ダウンロード後、ファイルを解凍します。 1.2 Linux Nginxのソースからインス ...

5月30日 17:40 投稿

CSS2 基本プロパティガイド

目次- サイズ設定 フォントプロパティ テキストプロパティ 背景プロパティ 枠線 displayプロパティ ボックスモデル---各タグ(要素)にはボックスモデルがある フロート フロートがもたらす悪影響 オーバーフロー属性 円形アバターの例 配置 z-indexによるz軸制御 透明度 サイズ設定 タグにサイズを設定する場合、ブロックレベルのタグのみ設定可能です。 インラインタグ ...

5月28日 14:06 投稿