Reigle 技術ブログ

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

HTML

マークアップ言語とは

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

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を使用したローディングの実装方法を記載します。 複数の画面で使用出来る…