2020-11-01から1ヶ月間の記事一覧
参考動画 初心者でもわかるHTML&CSS講座 第3回CSSの基本 - YouTube ブログ 初心者でもわかるHTML&CSS講座 第3回CSSの基本 | Inoma Create ※ブログ内に学習用のデータがありました。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－…
YouTube内の無料動画で練習してみました。 初心者でもわかるHTML&CSS講座 第2回基本的なHTMLタグを理解しよう - YouTube ブログ 初心者でもわかるHTML&CSS講座 第2回基本的なHTMLタグを理解しよう | Inoma Create 自分なりにまとめてみました。 －－－－－－…
YouTube上で視聴可能な動画で学習したいと思います。 初心者でもできるHTML&CSS講座 第1回HTML,CSSの概要 - YouTube 自分なりにまとめてみました。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ html＆css概要 ホームペ…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker flex 1.flex-grow:子要素事の大きさ比例 2.flex-shrink:親要素が縮んだ時の子要素事の縮む比率 3.flex-basis:子要素事の要素のサイズ指定 ショートハ…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker 自分なりにまとめてみました。 flex-flow 1.flex-diection:要素を縦と横に並べる方向 2.flex-warp:要素の折り返しの許可をするか ・direction＝ディ…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker 自分なりにまとめてみました。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ transition 1.transition-propert…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker 自分なりにまとめてみました。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ animation 1.animation-name:アニ…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker 自分なりにまとめてみました。 1.list-style-type:箇条書きのマークの種類 2.list-style-position:マークの表示位置 3.list-style-image:マークを画…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker 自分なりにまとめてみました。 1.font-style:文字のスタイル 2.font-weight:文字の太さ 3,font-size:文字の大きさ 4.font-heighet:文章の行間 5.font…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker 自分なりにまとめてみました。 1.background-color:背景色 2.background-image:背景画像 3.background-repeat:背景画像の繰り返し 4.background-posi…
参考サイト CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説 | webliker 自分なりにまとめてみました。 1.border-style:線のスタイル 2.border-width:線の太さ 3,border-color:線の色 ショートハンド border: １ ２ ３ .el{…
参考サイト webliker.info 自分なりにまとめてみました。 ショートハンド box-shadow:１ ２ ３ ４ ５ ６ .el{box-shadow: 2px 4px 10px 4px #000 inset} 単位はpx使用 影の移動＝正の整数以外に「-10px」とマイナス単位の指定が可能 影の色は不透明度を変更…
参考サイト webliker.info 自分なりにまとめてみました。 ↑「border-radius」＝４個の角をまとめて指定するコード １border-top-left-radius:左上の角丸 2.border-top-right-radius:右上の角丸 3.border-bottom-rightv-radius:右下の角丸 4.border-bottom-le…
参考サイト webliker.info 自分なりにまとめてみました。 cssプロパティ＝まとめて記述可能な「ショートハンド」 と言われる書き方ががある。 制作スピードがあがりプロも必然なテクニックになります。 －－－－－－－－－－－－－－－－－－－－－－－－－…
参考サイト webliker.info 記事内のコードを練習で記述したいと思います。 ※コードが長いので完成したらコードに色を付けます。 html <head> <meta charset="utf-8"> <meta name="robots" content="index.follow" /> <title>ページタイトル</title> <meta name="description" content="説明文" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <…</meta></meta></meta></meta></head>
以前練習したhtmlの練習の続きをします。 ↓参考サイト magazine.krowl.jp ↓使用したhtmlエディタ liveweave.com ネット上で使用可能なエディタに前回練習した「html」と「css」のコードを入力した状態で続きを開始しました。 ↑前回の作業した分を再現 今回は…
前の記事でコードを書き忘れたのでこの記事に記載します。 webliker.info html 「Facebook」のOGPコード <meta property="og:site_name" content="サイト名" /> <meta property="og:url" content="ページのURL" /> <meta property="og:type" content="ページのタイプ" /> <meta property="og:title" content="ページタイトル" /> </meta></meta></meta></meta>
参考サイト webliker.info 設定する事でサイトを使いやすくする設定 「Internet Explorer」＝「互換表示」と「標準モード」 の2種類がある ↓ ユーザーの環境により、どちらで表示されるか事なり「互換表示」の場合、レイアウトが崩れる場合がある html <meta http-equiv="X-UA-Compat-ible" content="IE=edge" /> ↑の</meta>…
参考サイト webliker.info 自分なりにまとめてみました。 Googleに誤解がないように、他のページとの関係性を説明することで、正確にページの評価をしてもらう :分割ページである事を伝えるタグ 分割ページとは「ページ送り」が付いているページの事 -------…
参考サイト⤵︎ webliker.info 自分なりにまとめてみました。 「meta」タグの使用＝webページをどのよう検索結果にするかGoogleのロボに指示が可能 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー Googleの検索結果に出さな…
参考サイト webliker.info 自分なりにまとめてみました ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 外部ファイルを読み込む 「css」と「jav」ファイルの読み込み→「head」内に読み込むファイルを書き込む ーーーーー…
参考ページ webliker.info 自分なりにまとめてみました。 主にwebページの情報に関する「meta」データを書くタグです（headに書く情報の中でも基本的な部分） －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 文字コード ※WE…
参考サイト webliker.info 今回から続きのページに移動します。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 「head」とは？ 「html」でWEBサイトを作成する場合、コードを大きく分けると「head」と「body」に分かれる …
参考ページ webliker.info Q:「div」タグに「id」と「class」付いている A:「div」がページのレイアウトを構成する為、頻繁に使用されるタグだから まとめ 「id」と「class」は特定の要素に「css」を適用する為の名付けの役割がある 「id」はページに１個、…
参考サイト webliker.info 自分なりにサイトの文章をまとめてみました。 結論:とりあえず「class」を使用する 理由:「id」は優先度の高さが邪魔をする ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐-------------------------------------------------------------…
参考サイト webliker.info 参考ページで自分なりにまとめてみました。 _________________________________________________ 「id」＝１つまで 「class」＝複数使用可能 _________________________________________________ 「CSS」＝優先順位がある「同じ要…
ネット上でテキストエディタが使える「Liveweave」で練習 https://liveweave.com/ 「Liveweave」 https://magazine.krowl.jp/4026/ html＆cssの参考にしたサイト ↑DLしなくてもサイト上で編集が可能 今回参考サイト内で<nav>と初めて見るコードがありました。 今</nav>…
参考サイト webliker.info 「CSS」には優先順位がある 同じ要素に対し別々のＣＳＳが適用された時どっちを優先して反映させるか、と順位付けの概念です。 例 <div> <p class="red">赤</p> <p class="red">赤</p> <p id="blue" class="red">青</p> </div> ↓ 「id」のセレクタが優先される（三行目） 同じ要素に対し、別々のcssが書いてある場…
参考サイト prog-8.com HTML グーグルチャーム CSSに設定がないので画像の表示がされないようです。
↓参考サイト webliker.info 「html」内での「class」の書き方 「id」属性と一緒の形式 <タグ名 class="class名"> ↓ <p class="class名"> class名は半角英数字で 「＿」「ー」の記号が使用可能 先頭に数字は使用不可 「CSS」内での「class」の書き方 「.」＋「class」名 ________</p>…
