WEBエンジニアの技術メモと日々

はじめてfavicon設定した！！ お恥ずかしながらサーバサイドエンジニア歴13年にして はじめてfavicon設定 しました！ 基本的にはプログラムよりな作業を主にしているので今までは基本的にフロントコーダー任せでしたが今回は人出も少なく。。。。それにnodejsでnuxtを使ったので、htmlに記載するのではなくnuxt.config.jsに記載をしたのでメモしておくことに。。 まぁプラスに考えて自分でやる仕事を（できる仕事）どんどん増やしています まずは favicon から、こちらはHTMLに記載する場合は <link rel="shortcut icon" href="イメージのパス"> これで設定できるみたいでこれですら 初耳学 これを nuxt.config.jsに記載 するとこちら link: [ {rel: 'icon', type: 'image/x-icon', href: 'イメージパス'}, ] なんかfavicon画像もらったら一緒に180x180の画像がついてきたのでこれ何？って聞いたらスマホとかでHOME画面にブックマーク置けるらしくその画像だと。。 せっかく作ってくれたのでこちらも設置してみました！！ <link rel="apple-touch-icon-precomposed" href="イメージパス" sizes="180x180" /> んでこちらをnuxt.config.jsに記載 link: [ {rel: 'apple-touch-icon', sizes: '180x180', href: 'イメージパス'}, ] apple-touch-icon-precomposedとapple-touch-iconの違いは古いiOSで光沢をつけるらしくそれをしないようにするのがapple-touch-icon-precomposedみたいです なんだかいろいろ便利な世の中になってきているな。。 ...

progateのHTML&CSSをが学習した結果をまとめておく HTML DOCTYPE宣言 <!DOCTYPE html> 決まりの宣言みたいなもの headタグにはWebの設定情報などを記述 title meta情報 <link rel="stylesheet" src="ファイル"> など bodyにWEBページのよく使われる構成のheaderタグとfooterタグが用意されている ブロック要素とインライン要素、インラインブロック要素 親要素の幅いっぱいに広がる要素をブロック要素 幅や高さ、余白指定ができる 配置は縦並び 改行されない要素をインライン要素 インライン要素は幅や高さを指定できない インライン要素は左右のみ余白を指定できる 配置は横並び インラインブロック要素はインライン要素のように横並びだが以下 ブロック要素のように幅や高さ、余白が指定できる 配置は横並び aタグはインライン要素だがdisplayプロパティを使うとインラインブロック要素に変更できる。 display: inline-block; クラス名はスペースで区切って複数設定できる CSS 書き方 要素で指定 要素名 { スタイル } ul { スタイル } a { スタイル } クラスの指定は .className{ スタイル } idの指定は #idName{ スタイル } 特定要素に適用したい場合は .className li のようにクラス名の要素に対してのスタイルという記述をする 同じスタイルで違う要素を同時に指定する コンマで区切る h1, li{スタイル} 背景画像 background-image: url("画像URL"); 横に繰り返しのリピートさせずに1枚で用事させる background-size: cover; 親要素の中のブロック要素を中央寄せにする margin: 0 auto; 要素を半透明にする opacity: 0.1; 0.0(透明)〜1.0(完全な不透明) 文字の間隔を調整する letter-spacing...