技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

HTML/CSS

フロントエンドの環境設定

フロントエンドの環境設定 概要 Babel : ES6 -> ES5への変換 Node.js : JSライブラリ管理 webpack: 1つにまとめる(読み込み速度UP) polyfill: 下位互換 vue-cli: 必要ソフトをパッケージ化 Npm ■ Npmとは Node.jsはJavaScriptを実行する環境です。 本来、Ja…

datelistについて

datelistについて ■ datalistとは 入力候補となるデータリストを定義する時に利用する。 タグは、フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、タグで定義します。 www.htmq.com ■ どんな時に利用するの? data…

htmlタグメモ

htmlタグメモ head内 <html> HTML文書だということを表す。HTMLにおいて基点となる要素 <head> HTML文書のヘッダ部分。ブラウザに表示されない。この中に検索エンジンのための説明文やCSSファイルへのリンク、ページタイトルなどを記述する <meta> 言語や説明文など、ページの</meta></head></html>…

CSSのvw, vhの違い

CSSのvw, vh, vmin, vmaxの違い CSSをいじってる時にこの辺りがよく理解できていなかったのでまとめます。 vw ビューポートの幅に対する割合。 .hoge { width: 50vw; } hogeクラスの幅を 50vw と指定しています。 基準のビューポートの幅を vw で表すと 100v…

CSSのチートシート 後編

CSSのチートシート 後編 CSSのチートシート 中編の続き 文字の配置 文字の配置はtext-alignタグを利用すればOK(あくまで文字のみ) - left - right - center - jistify (両端そろえ。スペースの調整もしてくれる) p { text-align: right; } リストの表示方…

CSSのチートシート 中編

CSSのチートシート 中編 CSSのチートシート 前編の続き フォントの指定方法 font-familyタグを利用すればフォントの指定ができます。 1. 書き方 font-family: フォント名; font-familuで指定されたフォントが閲覧者のPCにダウンロードされていない場合は利用…

CSSのチートシート 前編

CSSのチートシート 前編 CSSのよく使う小技のチートシートをまとめました。 idセレクタ HTML : id属性 CSS: #を使って選択 <div id="test"> テストの文章 </div> #test { color:blue; } これでidがtestのdivタグの色を青色に指定することが出来ます。 classセレクタ HTML : class…

HTMLのチートシート

HTMLのチートシート HTMLのチートシートを作成しました。 HTMLに必要なタグ 1. DOCTYPE HTMLファイルがどのように記載されているかを宣言できる。 例えば以下のように記載すると、この文書がHTML5で作成されたものであることを指定することが出来ます。 2. …

ファビコンとタッチアイコンの設置方法

ファビコンとタッチアイコンの設置方法 Webページには本文で利用する画像以外に、用意しておくと良い画像があります。 代表的なものに「ファビコン」と「タッチアイコン」です。 ファビコンとは? お気に入りやタブに表示される画像のこと。 タッチアイコン…

スマホで画像サイズを最適に表示させる方法

スマホで画像サイズを最適に表示させる方法 現代ではWebページを見る方法が増え、スマホで見る人も増えました。 ですのでスマホでwebページを見た時でも綺麗な画面サイズで見えるようにすることが必須です。 その場合に良く使う技が「viewportの設定」を用い…

(初心者)全てのWEBページに必要な要素

(初心者)全てのWEBページに必要な要素 どんなWebページを作るにしてもタイトルなどの要素は必須になります。 そこで、最低限必ず必要になるHTML要素をピックアップしますー !DOCTYPE HTMLには様々な種類があります。 バージョンによって利用できるタグが違…