技術ブログ

プログラミング、IT関連の記事中心

HTML

HTMLヘッダーにスタイルを設定する方法

目次 HTMLヘッダーにスタイルを設定する方法 基本的な構造 <style> タグの使用 まとめ HTMLヘッダーにスタイルを設定する方法 HTMLドキュメントの見た目をカスタマイズするためには、CSS(カスケーディングスタイルシート)を使用します。この記事では、HTMLのヘッ…

HTMLにおけるボタンスタイルのリンクの作成方法

目次 HTMLにおけるボタンスタイルのリンクの作成方法 コード例 実装のポイント HTMLにおけるボタンスタイルのリンクの作成方法 HTMLでボタンの外観を持つリンクを作成する方法について説明します。この記事では、buttonタグをaタグで囲む方法を採用していま…

HTMLとCSSを使用してpタグ内のテキストを縦方向に中央揃えする方法

目次 HTMLとCSSを使用してpタグ内のテキストを縦方向に中央揃えする方法 CSSを使用した縦方向の中央揃え 結論 HTMLとCSSを使用してpタグ内のテキストを縦方向に中央揃えする方法 この記事では、HTMLとCSSを使ってpタグ内のテキストを高さ400pxのボックス内で…

div内のhttps URLをリンクに自動変換する方法

目次 div内のhttps URLをリンクに自動変換する方法 1. HTMLの準備 2. CSSのスタイルを適用 3. JavaScriptでURLを検出してリンクに変換 まとめ div内のhttps URLをリンクに自動変換する方法 Webページ上でテキストとして存在するURLをクリック可能なリンクに…

マークアップ言語とは

目次 マークアップ言語とは? 主なマークアップ言語の例 なぜマークアップ言語を使用するのか? マークアップ言語とは? マークアップ言語とは、テキストを加工して表示するための言語の一つです。 この言語はテキストの意味や構造を示すタグや注釈を付加し…

CSSで変数を使用する方法

目次 変数を使用する方法 サンプル 変数を使用する方法 以下の様に変数定義を行います。 ※「:root」はお作法だと思ってください。(実際は擬似クラスというものですが、詳しくは割愛します) :root { --sample-color: red; } 上記で用意した変数は以下の様に…

HTMLで作成したWEBサイトのソースコードをShellで簡単にサーバーにデプロイする方法

目次 ディレクトリ構成 deploy.shの記載 ディレクトリ構成 ディレクトリは以下の様なサンプルを想定します。 「index.html」はファイル、「hoge」はディレクトリです。 ディレクトリはどのようなファイルが存在しても問題ないですが、「deploy.sh」だけは必…

HTMLとJavaScriptでプログレスバーの実装(progress)

目次 はじめに プログレスバー はじめに プログレスバーとは、ダウンロードや何らかの処理の進捗を表示するバーのことです。 ゲームのインストール中などによく表示されます。 ここでは、HTMLの標準のprogressタグを使用して、プログレスバーの表示と進捗変…

HTML/CSSで入力項目のプレースホルダーの文字色を変更する方法

目次 プレースホルダーの色を変える方法 特定のテキストフィールドのプレースホルダーの文字色を変更する方法 プレースホルダーの色を変える方法 以下のようにCSSを定義する事でプレースホルダーの色を変える事ができます。 ::placeholder { color: orange; …

HTMLでオートコンプリートを無効化する方法(autocomplete)

目次 自動補完(オートコンプリート)とは 自動補完(オートコンプリート)の無効化 Chromeでの自動補完(オートコンプリート)の無効化 自動補完(オートコンプリート)とは ログイン画面などでよくある、メールアドレスやパスワードなどが自動で入力される…

HTMLでファビコンを設定する方法

目次 ファビコンとは ファビコン設定方法 モバイル端末のファビコン ファビコンとは 簡単に説明すると、以下のようなタブなどの横についているアイコンのことです。 ファビコン設定方法 ファビコン画像を用意して、HTMLと同じディレクトリに配置します。 拡…

HTMLとJavaScriptとCSSでローディングを作成する方法(SpinKit)

目次 はじめに ローディングのJavaScriptの準備 ローディングのCSSの準備 ローディングを使用するHTMLの準備 ローディングの止め方 ソースコードの全量 はじめに 本記事では、SpinKitを使用したローディングの実装方法を記載します。 複数の画面で使用出来る…