自分の備忘として残しておくために書きました。
優先度を計算できるセレクタは6つある。
下記は上から優先度の高い順に記載してる。
| セレクタ | 桁数 |
|---|---|
| IDセレクタ | 3桁目 |
| クラスセレクタ | 2桁目 |
| 属性セレクタ | 2桁目 |
| 擬似クラス | 2桁目 |
| タイプセレクタ | 1桁目 |
| 擬似要素 | 1桁目 |
これらは単純にどのセレクタがいくつあるのかで計算していく。
例えば、「#abc .cba」だったら110になる。
理由は3桁目のIDセレクタ1個、2桁目のクラスセレクタ1個、
1桁目は対象がないので0個だから、答えは110になるという解法です。
プログラミング初心者の学習記録です。
- その日に行ったこと
- つまずいたこと
- 新たな発見 等を書き溜めていきます。
CSS Floatを使用した際、親要素のはみ出してしまう
→親要素にoverflow: hidden;を指定
背景画像の影響で、文字が見にくい 可視性を上げる為、背景画像を暗くしたい
参考サイト
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
297日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 22, 2020
297日目 2h
・xdデザインカンプからのサイト模写
・ハンバーガーメニュー作成
作っては動かなくて消し、の繰り返しｗ#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
下記のようなアニメーションをつけたい時。
https://i.gyazo.com/65da0add99ff6e0581e91924fa1d9e38.mp4
ScrollRevealを使用します。
※公式サイト
https://scrollrevealjs.org/
まずは読み込みするために下記の記述を行います。
ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。
<script src="https://unpkg.com/scrollreveal"></script>npm でインストールする場合は下記コマンドを実行してインストールして下さい。
$ npm install scrollreveal --save
実際に実装してみます。
<divclass="page"><divclass="target text1">scroll</div></div><divclass="page"><divclass="target text2">hello</div></div><divclass="page"><divclass="target text3">left</div></div><divclass="page"><divclass="target text4">right</div></div><divclass="page"><divclass="target text5">top</div></div><divclass="page"><divclass="target text6">animation</div></div><divclass="page"><imgclass="target image1"src="https://liginc.co.jp/wp-content/uploads/2017/10/150691334095133300_52.png"></div>続いて、CSS。
@mixinpositionCenter(){position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}body{background-color:#757575;font-family:Arial;color:#79BD9A;}.page{position:relative;height:100vh;}.target{@includepositionCenter();font-size:50px;font-weight:bold;}img{width:300px;}最後にjs。
ScrollReveal().reveal('.text2',{duration:1600,scale:4,reset:true});ScrollReveal().reveal('.text3',{duration:1600,origin:'left',distance:'50px',reset:true});ScrollReveal().reveal('.text4',{duration:1600,origin:'right',distance:'50px',reset:true});ScrollReveal().reveal('.text5',{duration:1600,origin:'top',distance:'50px',reset:true});ScrollReveal().reveal('.text6',{duration:1600,scale:0.1,reset:true});ScrollReveal().reveal('.image1',{duration:1600,reset:true});以上でふわっと文字や画像を出現させることができます。
＊下のサンプルコードをもとに書いてまする
身分が高ければ高いほど、意見が通るんだ
（要はCSSが優先して適用されるってことね。）
| 雑魚 | 下人 | 平民 | 地主 |
|---|---|---|---|
| .content（親クラス） | span(タグ名) | .cls(子クラス) | #first(ID) |
[サンプルコード]
<div class="content">
<span id="first" class="cls">ヤッホー</span>
<span>ヤッホー</span>
<span>ヤッホー</span>
<span>ヤッホー</span>
</div>
.content {
color: blue;
font-weight: 600;
}
span {
color: purple;
}
.cls {
color: orange;
}
#first {
color: magenta;
}
ただし1つのHTMLファイルで
classは同じ名前で何回も使えるのに対して、idは１回しか使えないんだよ。
地主の力は絶大だけど、何回も命令するとみんな言うこと聞かなくなるからね
webviewは画面を長押しするとコピーなどのメニューが表示され、そのときにバイブも発動するという特徴があります。
ネイティブではこのようにならないので、長押ししてメニューが出ればハイブリッドアプリってすぐバレます。
そこまで意識する必要はないかもしれませんが、アプリによっては長押しでコメントを削除できたりとイベントを付けていたりするので、コピーさせる必要がないならば切っておいた方が良いと思います。
*{-webkit-user-select:none;}これでコピーメニューが表示されなくなりますし、バイブも発動しません。
ただこれだと、input要素に入力もできなくなるので、
input,textarea{-webkit-user-select:auto;}としておきましょう。notを使ってもOKです。
リンクを長押しすると違ったメニューが出る場合があります。
*{-webkit-touch-callout:none;}これで出ないです。
ただバイブは発動するようでした。
気になるならaタグでのリンクはやめて違う要素でclickイベントで遷移するようにしてしまえばバイブは発動しません。
長押しするとその部分にハイライトがかかることがあります。
*{-webkit-tap-highlight-color:transparent!important;}これでハイライト部分が透明になるので事実上ハイライトが消えます。
ハイブリッドアプリを作るうえでwebviewの不必要な機能をcssでOFFにする方法を紹介しました。
知らないと設定することもないですが、簡単にできるのでデフォルトで設定しておきましょう。
＊Image（カーソルをボタンに合わせると影が現れます。）
（CSSのみ）[HTMLの中身です]
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<button class="btn float">Button</button>
</div>
</body>
div#container>.btn.floatを打てば、一瞬でHTMLが作れるのよ
ボタンにカーソルを合わせると、
ボタンが0.3秒で影が現れますよん。
[style.cssの中身です]
#content {
text-align: center;
}
.btn {
background-color: white;
color: black;
border: 2px solid black;
padding: 10px 40px;
margin: 150px 0;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn.float:hover {
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
＊ポイントだけ簡単に紹介しま〜す
.btn { 略 }
ボタンにカーソルがあたっていない時の飾り付けを決めています。
cursor: pointer;
ボタンにカーソルが当たった時だけ、ミッキーさんの手のひらマーク
になります。
transition: all 0.3s;
0.3秒かけて.btn{ }の飾り付けから、.btn:hover { }の飾り付けに変わっていきます。
.btn:hover { 略 }
ボタンにカーソルがあたった時の飾り付けを決めています。
「webページ自分でコーディングしてみたい」とか「特にやりたくはないけど仕事でやらなきゃいけない」でも、「とっかかりがわからない」そんな人のための「超初心者講座」です。
なので、経験者には向いていないので、このシリーズは読まなくていいです。
HTMLのコーデイングは普通のテキストエディタでもできるよ。
でもさ、専用のエディタがあるからそれを使おうよ。それっぽいインターフェースだし、気分を高めよう。
他にもエディタはいっぱいあるけど、無料だし機能拡張もいっぱいあるから、この講座ではVSCodeを使って行こうと思う。今後VSCodeが入ってることを前提な話も出てくると思う。
VSCodeをここからダウンロードしてインストールしよう。
そのままだと多分英語だしとっつきづらいかなって思うので、「日本語化」しましょう。
VSCodeお日本語化プラグインをここからダウンロードしてインストールしよう。
↑これを入れてVScodeをインストールすれば日本語化されていると思うよ。
VSCodeはいろいろプラグインがあって機能が拡張できるぞ。
いっぱいあるから選べないよね。だからこれを入れとけばいいよってやつをピックアップしました。
簡易的なローカルサーバが1clickでたてれるぞい。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
保存すればscssコンパイルしてくれるぞい。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
htmlコードを予測変換してくれるぞい
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
Shift+Enter で <br>入れてくれるぞ
https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag
インデントに色をつけてくるから親子関係がみやすいぞい
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
ファイルとかフォルダーをそれっぽいアイコンで表示してくれるぞい
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
始まりのタグ入れれば閉じタグ精製してくれるぞい。（たまに煩わしい）
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
cssとかscssとかに色をつけてみやすくしてくれるぞい。
https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier
() {} の始まりと終わりに色をつけてくれるからわかりやすいぞい
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
始まりでも終わりでもタグを編集すればどちらも書き換わるぞい。（これもたまに煩わしい）
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
次回もお楽しみに
今更ですが、viewの構成を整える際にいつもCSSがおざなりになるなぁ。と感じたので便利帳代わりに参考にしていた記事を辞書感覚で残しておこうと思います。
（※不定期更新）
決してフロント周りが苦手とか嫌いなわけではなく（むしろフロント好き）、ただ普通に僕の記憶力の乏しさが垣間見れたのでメモ代わりに使います。
気が向いたら更新していくスタイルでいきます。
-初級編-
・ <h1></h1>
//h1~h6まで使える
・ <p></p>
・ <!-- -->
・ <a href="URL"></a>
・ <img src="URL">
・ <ul></ul> / <ol></ol>
・ <li></li>
・ class=""
・ <html></html>
・ <head></head>
- 文字コードの指定, ページのタイトルの設定, CSSの読み込み 等を行う
- <meta charset="utf-8">
- <title></title>
- <link rel="stylesheet" href="ファイル名(ex. stylesheet.css)">
・ <body></body>
・ <!DOCTYPE html>
・ <div></div>
・ <span></span>
・ <input>
- <input type="属性" value="テキスト">
// <属性> 送信ボタン…submit
・ <textarea></textarea>
-中級編-
・ <header></header>
・ <footer></footer>
-初級編-
・ color: #カラーコード;
・ /* */
・ font-size: ??px;
・ font-family: フォント名;
// フォント名にスペースがある場合は、ダブルクォーテーションで囲む
・ background-color: #カラーコード;
・ width: ??px;
・ height: ??px;
・ list-style: none;
・ float: left/right;
・ padding: ??px;
- padding-top/bottom/left/right: ??px;
- padding: ??px ??px ??px ??px;
- padding: ??px ??px;
・ border: ??px 種類 カラーコード;
- border-top/bottom/left/right: ??px 種類 カラーコード;
// <種類> 一本線…solid
・ margin ??px;
- margin-top/bottom/left/right: ??px;
- margin: ??px ??px ??px ??px;
- margin: ??px ??px;
-中級編-
・ background-image: url(画像のURL);
・ background-size: cover;
・ margin: 0 auto;
// 必ずwidthを併せて指定
// 上下のmarginにautoは指定不可
・ opacity: 透明度;
・ letter-spacing: ?px;
・ display: 要素;
// <要素> block, inline-block, inline
・ セレクタ :hover
・ border-radius: ??px;
・ text-align: left/center/right;
// margin: 0 auto; はブロック要素, text-align: center; はインライン要素・インラインブロック要素
・ Font Awesome
- Font AwesomeのCSSファイルを読み込み, <span>タグにfa クラスとfa-アイコン クラスを指定する
- <link rel="stylesheet" href="URL">
- <span class="fa fa-アイコン名"></span>
・ rgba(redの値, greenの値, blueの値, 透明度)
- rgb(redの値, greenの値, blueの値);
// opacityは中身全てを透明にする
・ transition: 変化の対象 変化の時間;
- transition all ?s;
・ line-height: ??px;
// 要素の高さとline-heightプロパティを同じ値にすると、要素の縦方向の中央に文字を配置するのにも使える
・ font-weight: 太さ;
// <太さ> normal, bold
・ width: ??%;
・ height: ??%;
・ position: absolute;
top/left/right/bottom: ??px
// 上記のようにtop, bottom, left, rightも併用可能
// 初期の基準位置はサイト全体の左上
- position: relative;
// topやleftと併用して要素の位置を変更するためにも使用可能
・ box-shadow: ?px ?px 色;
・ cursor: カーソル名;
// <カーソル名> text, pointer, default
・ セレクタ名 :active
・ position: fixed;
top/left/right/bottom: ??px;
・ z-index: 番号;
// 必ずpositionプロパティと併用する
-上級編-
・ @media (条件) {…}
- @media (max-width/min-width: ????px) {…}
・ box-sizing: border-box;
// *(全ての要素)に対して指定を推奨
・ viewport
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <head>内に記述
・ clear: left;
// 空タグとclearでfloatを解除する
- <div class="clear"></div>
・ max-width: ????px;
・ display: none/block;
-Flexbox-
・ display: flex;
・ flex: auto;
・ flex-wrap: wrap;
・ flex-direction: column;
transform: translate系
x,yは普通に効くけどx座標はブラウザによって表示が異なる。
使える関数
・translate(x, y=0)
・translateX(x)
・translateY(y)
・translateZ(z)
・translate3d(x, Y=0, z=0)
transform系の要素について
適用する要素のpositionはabsoluteにする必要がある。
検証
わかりやすいようにアニメーションをしているが、下記のCSSのままではアニメーションしない。
trasnlate(x, y=0)
yが未指定の時は0扱い。
/* x方向に30px, y方向に20px */
.translate {
transform: translate(30px, 20px);
}
traslateX(x)
そのまんま、x座標の移動。translateY, translateZも同様。
/* x方向に30px */
.translateX {
transform: translateX(30px);
translate3d(x, y = 0,z = 0
x,y,z座標の移動。y,zが未指定の場合は0扱い。
赤いブロックはz=10pxなのだが、紫のブロックがz=20pxに移動しても変化
はない。
/* x,y,z方向に20pxずつ /
.translate3d {
transform: translate3d(20px, 20px, 20px);
}
/赤いブロックは10px前に出ているはずだが */
.red {
fill: red;
transform: translateZ(10px);
}
margin-blockはCSSのプロパティで、論理的なブロックの先頭と末尾のマージンを設定する。これは要素の書字方向やテキストの向きに応じて。物理的なマージンに変換される。
/* 値 /
margin-block: 30px 30px; /絶対的な長さ /
margin-block: 2em 2em; /直近のブロックコンテナーの大きさに対する相対値 /
margin-block: 20px; /先頭と末尾の両方を設定 */
/* キーワード値 */
margin-block: auto;
/* グローバル値 */
margin-block: inherit;
margin-block: initial;
margin-block: unset;
これらの値は、margin-topとmargin-bottom,またはmargin-rightとmargin-leftプロパティに、writing-mode,direction,text-orientationで定義された値にしたがって対応する。
値は、margin-block-startとmargin-block-endで個別に設定することができる。インライン方向のプロパティはmargin-inlineで、margin-inline-startとmargin-inline-endを設定する。
構文
値：margin-blockプロパティは、margin-leftプロパティと同じ値をとる。
形式文法：<'margin-left'>{1,2}
例
HTML
Example text
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
margin-block: 20px 40px;
background-color: #c8c800;
}
参考元：https://developer.mozilla.org/ja/docs/Web/CSS/margin-block
CSSの論理プロパティにおける考え方CSSのボックスモデルについて説明する時、下記のような図がよく使用されている。
確かにこの図は当時の正しいもので、もちろん今でもそうだが、margin-left、padding-right、border-topのような物理プロパティは最後の日が来るかもしれない。
新しい論理プロパティを使い始めるには、left/rightやtop/bottomについて考えるのをやめて、それらをinline-start,inline-end, block-start、block-endに置き換える必要がある。
インライン軸
英語を例にする。読む方向は左から始まり、右側で終わる。これはプロパティのインライン要素。「display: inline;」で配置された要素を考えた時、想像するのはとても簡単。各アイテムは行に沿って表示される。
例：padding-inline-startだと、言語が始まる側のpaddingになる。
・英語の場合
padding-inline-startは、padding-leftと同じ
・アラビア語の場合
padding-inline-startは、padding-rightと同じ
・日本語の場合
padding-inline-startは、padding-topと同じ
ブロック軸
topとbottomのプロパティだと、topがwebサイトの始まり、bottomが終わり。覚えておくのは非常に簡単。「display: block;」の要素が複数上から順に積み重なっていると想像してみる。
新しいボックスモデルのプロパティ
インラインとブロック軸をある程度理解したところで、新しいボックスモデルのプロパティを確認しておく。
英語の場合、プロパティは下記のようになる。
margin
・margin-block-start = margin-top
・margin-block-end = margin-bottom
・margin-inline-start = margin-left
・margin-inline-end = margin-right
padding
・padding-block-start = padding-top
・padding-block-end = padding-bottom
・padding-inline-start = padding-left
・padding-inline-end = padding-right
border
・border-block-start = border-top
・border-block-end = border-bottom
・border-inline-start = border-left
・border-inline-end = border-right
論理ディメンション
widthとheightのプロパティもこの新しい方法に合わせて対応する必要がある。インラインとプロパティ軸を理解したら、ディメンションを理解するのも簡単。英語では、widthプロパティはinline-sizeに、heightプロパティはblock-sizeに置き換える。
日本語のように上から下の言語の場合、逆になる。
・widthは、block-sizeに
・heightは、inline-sizeに
min/maxは、プロパティの開始時にmin/maxを追加するだけ。
・min-inline-size: 300px; max-block-size: 100px;
参考元：https://coliss.com/articles/build-websites/operation/css/new-css-logical-properties.html
静的なウェブサイトにおいて、コンポーネントを綺麗にかつみやすく整理したいというお話から
「storybookいいよ、使いやすいよ」と言われたのがきっかけ。
「storybook？？？絵本？？絵本なの？」というところからのスタートでした。ができました。
今回のゴールは、コンポーネントがプレビューで見れてウェブサイト側のSCSSを取り込めて、ソースコードも見れることとしています。
まずは導入したいプロジェクト配下で、下記コマンドを叩きます。
nodeのバージョンはこれです。v13.12.0 (14そろそろでる。でた？)
npx -p @storybook/cli sb init --type html
そうするとプロジェクト配下に
.storybook/main.js
stories/index.stories.js
というファイルが出来上がります。
このままではゴールへは程遠いので、SCSSを読み込みできるように以下を追加します。
yarn add node-sass sass-loader css-loader style-loader html-loader extract-loader -D
(npmでもどっちでも)
このあとにmain.jsを以下のように修正。
webpack.configのようにかけるます。便利。
const path = require('path');
module.exports = {
//後述しますがmdxファイルを使います
stories: ['../**/*.stories.(js|mdx)'],
webpackFinal: async (config) => {
config.module.rules.push(
{
test: /\.(sa|sc|c)ss$/,
use: ['style-loader',
{
loader: "css-loader",
options: {
// CSS内のurl()メソッドの取り込みを禁止する
url: false,
}
}, 'sass-loader','import-glob-loader'],
include: path.resolve(__dirname, '../'),
}
);
return config;
}
};
これで既存のCSS(SCSS)をstorybookで読み込みできるようになります。
stylusやless使いの方々はsass-loaderあたりを変えることで使えるかと。
お次にプレビュー時にソースコードを見たり何かしらのDocsを残したいので以下のアドオンを入れます。
https://github.com/storybookjs/storybook/tree/master/addons/docs
yarn add @storybook/addon-docs -D
ここでようやくインストールは終了。
次へ。
sotries配下に
text-01.mdx
text-01.stories.js
の2ファイルをとりあえず空ファイルで作ります。
んでそれぞれ、以下をコピペ
import { Story, Preview } from '@storybook/addon-docs/blocks';
# Normal
<Preview>
<Story id="components-text--normal" />
</Preview>
import'../../../src/style/style.scss';importdocsfrom'./text-01.mdx';// this import is importantexportdefault{title:'Components|Text',parameters:{// specify the docs MDX content heredocs:{page:docs,}}};exportconstNormal=()=>{return`
<p class="m-txt__01">テキストテキストテキストテキスト</p>
<p class="m-txt__01 m-txt__01--bold">テキストテキストテキストテキスト</p>
`}あとはyarn storybookなどでstorybookを立ち上げるだけ。
あら素敵！といった感じでstories.jsのtitleの階層に基づいた形でコンポーネントが見れます。
こんな感じ
docsタブを開くとソースコードもみれますね。
あとはコンポーネントを量産していくだけです。
※stories/index.stories.jsは捨てちゃって大丈夫です。
storybook for HTML の書き方でなかなかに苦戦したのでメモ書き代わりに残しておきます。
xxx.stories.jsのexport const lv01などの関数名をmdxのStory idで読み込む時に以下のルールになります。lv01 => lv-01
storybook上のURLにパラメータがつくのでそちらでも判断可能です。
ボックスの生成
HTMLの要素はどの要素もボックスと呼ばれる四角形の領域を生成する。ボックスは大きく分けてブロックボックスとインラインボックスの２種類に分けられる。これは、displayプロパティの値によってボックスの種類が決まる。
各HTML要素はブラウザのデフォルトスタイルシートによってdisplayプロパティのデフォルト値が指定されているので、それに伴ってデフォルトのボックスの種類も決まっているが、displayプロパティを変更する事でボックスの種類を帰る事ができる。
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
ブロックボックスとは
displayプロパティの値がblockやtableなどの要素はブロックボックスを生成する。ブラウザのデフォルトでブロックボックスを生成する要素にはh1~h6,p,div,ul,ol,li,table要素などがある。
ブロックボックスは幅に関係なく、上から下へ縦方向に配置される。ブロックボックスの前後には改行が伴って、1つの段落としてレイアウトされると考えるとイメージがつきにくいかもしれない。
他にブロックボックスにはこのような特徴がある。
・幅（width)や高さ（height）を指定
できる。幅を指定しなければ親要素の幅全体に広がる。
・上下左右のmargin、paddingを指定できる。
インラインボックスとは
displayプロパティの値がinlineや
inline-tableなどの要素はインラインボックスを生成する。ブラウザのデフォルトでインラインボックスを生成する要素にはspan,em,strong,img要素などがある。
インラインボックスは左から右へ横方向に配置される。インラインボックスの前後には改行は伴わず、行内の一部としてレイアウトされると考えるとイメージがつきやすいかもしれない。
他にもインラインボックスにはこのような特徴がある。
・幅（width）や高さ（height）を指定できない
・上下のmarginを指定できない。
※インラインレベル要素でもimgや、input、textarea要素のようにCSSで幅や高さを指定できる要素もある。このような要素は置換要素と呼ばれ、幅や高さを指定できるHTMLの属性（width, height, size, colなど）を持っている特徴がある。
インラインブロックボックス
displayプロパティの値がinline-block要素はインラインブロックボックスを生成する。インラインブロックボックスはインラインボックスと同じように横方向に配置されるが、ブロックボックスのように幅や高さ、上下のmarginを指定できるので横並びのナビゲーションなどのレイアウトに便利。
displayプロパティ
主要なdisplayプロパティの値と生成されるボックスは以下のようになる。
ボックスモデルとは
cssでレイアウトをする際には、ボックスモデルを理解する必要がある。cssの定義するボックスモデルは以下の図のように4つの領域で構成されている。
参考元：https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
画像の引用先：https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
自分のポートフォリオを作成してみました。
まだ全然イケてないけど、内容としては公開できるレベルになったので公開。
[ここ]からアクセスできます。
ちょっとだけ工夫した点を以下。
今回は静的サイト。使用したフレームワークはBootstrap。
サイト自体の枠組み・レスポンシブデザイン・サイト内を飾る部品の多くはBootstrapを使用して、背景色・フォントとかサイトのグリッドとかに関係ない部分をCSSに書きました。大きなデザイン崩れはないと思うが、小さな崩れはまた修正します。
フロントエンドの練習も兼ねているので、HTMLを割と真面目に書きました。
ちなみに、HTMLのSanitize ( Normalize )はBootstrapが担ってくれているので、やっぱり何かしらのフレームワークは入れた方が無難。
Bootstrapは標準の物をそのまま使うと、「ああ、Bootstrap使ったのね」っていう見栄えになっちゃいます。
そこで、Bootstrapっぽさをなくすために、カスタマイズすることができます。
一番地道な手法はCSSでゴリゴリにいじる。ただ、これは一つの変更がどこまで影響するのかわかりません。僕はCardの四隅をもうちょっと丸くしようとして手動でいじってみたところ、Cardの上部の写真が飛び出ました。これは写真も四隅を丸めて一件落着で良かったのですが、こういうことが起こりかねないのでCSSでいじるのはやめておいた方が無難と判断しました。
そこで、Bootstrapをカスタマイズしてテンプレートの形で提供しているサービスがあります。
私は startbootstrap.comから SB Admin 2というテンプレートをダウンロードして使用しました。
これは Bootstrap カスタマイズってぐぐるとあっという間に詳しいやり方が出てくると思うので、申し訳ないですけど説明割愛。
かなり簡単にカスタマイズできるのでお試しください！
CarouselにYoutubeの動画を埋め込むCarouselとは
画像がスルスルと左右に移動するようにJSが組み込まれた部品ですが、これにもYoutubeの埋め込みを入れることができます。(Bootstrap 公式Document Carouselhttps://getbootstrap.com/docs/4.4/components/carousel/)
やり方はimgの部分を埋め込みリンクに変更すればうまくいくはずです。
<divclass="carousel-item"><imgclass="d-block w-100"src="XXXX.jpg"alt="Third slide"></div><divclass="carousel-item">
{{ ここに<iflame></iflame>のYoutubeの共有埋め込みリンクを放り込む }}
</div>ちなみに動画のサイズを変更するにはのタグ内にwidthとheightの数値をいじる部分があるので、それで変更してください。
工夫でもなんでもないですが。
Google FontsをCDNで利用するのはもはや定石なのかもしれませんが、使用していることは申し上げておきます。
無機質なページになることは想像がついたので、Adobe Fresco(iPad お絵かきソフト)で謎の桜(?)の盆栽を書きました。ほぼ絵を描くのは初心者ですので、これだけ映えるように見えるのは、相当ソフトが優秀ということでしょう。
ちょっと華やかになったかな。意外と上手に描けた気がします。線がところどころ迷子にっているのはご愛敬。
ちなみに、index.htmlの最初のページのJappao's PortfolioはGIMPで画像編集して作りました。実はAdobe系よりGIMPの方が使用歴が長く操作に慣れているのでGIMPでさくっと作りました。（フリーソフト万歳）
本当はちゃんと文字も盆栽画像も元ソースのまま貼り付けるべきなのですが、ちゃんとやる方法が思い浮かばなかったので。これは改良点として次の課題にします。
以上。
もうちょっと頑張れよって言われると思いますが、今回はここまでで。
このポートフォリオに乗せるためにこれからも開発頑張れそうです。
まだネタがあるので随時ポートフォリオ更新していきます。ぜひご覧になってください。
sample.html、sample.css、sample.scss を作成
.htmlファイル内で、html:5と入力( VSCode の emmet を使用 ）。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>サンプル</title></head><body></body></html>sample.scssをsample.cssにコンパイルするために、
VSCodeの拡張機能「Live Sass Compile」を使用。
⬇︎
htmlのheadでsample.cssを読み込む
<linkrel="stylesheet"href="sample.css">これでsample.scssの記述が反映される。
htmlのheadで読み込む
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">これでbootstrapの記述が反映される。
Reactで開発してFirebaseにHostingした。
Hosting先のURLをiPhone(safari)で開いてみたら、下の画像のようなコード？が画面に表示されていた。
エラーかと思ったが、Macでsafariの 開発者ツールを使って確認したところ<script>要素と<style>要素の値がブラウザに表示されてしまっているだけで他の要素は正常だった。
そもそも<script>要素と<style>要素はchromeでは自動的に非表示になっていたが、safariでは表示されてしまったようだ。
cssで下記を追加して見た目的には解決した。
style{display:none;}script{display:none;}問題は他にあるのかもしれないが、ひとまずこれで。下記の問題は先送り。
- FirebaseのHostingの設定を漏らした？
- Reactの設定を漏らした？
- Reactのライブラリの不具合？
まず、ボックスモデルについてまだ知識が浅い場合はこちら。
https://qiita.com/suiru_nakamura/items/f81eb7a4b0bc696cf01d
marginの種類
marginにはプロパティが用意されており、省略も簡単。
個別指定
・margin-top
・margin-bottom
・margin-left
・margin-right
marginの省略
・margin:0;(上下左右）
・margin:0 0;(上下）（左右）
・margin:0 0 0;（上）（左右）（下）
・margin:0 0 0 0;（上）（右）（下）（左）
論理プロパティ
・margin-start
・margin-end
・margin-before
・margin-after
margin-topなどは見慣れてるけど、margin-startは初めてという方もいると思う。margin-(start|end|before|after)は回転方式のブロックに対して、提案されたもの。
margin-topは、画面から見た物理的な方向に対し、margin-startは、物理的な方向になる。
横書きにmargin-startが指定されている場合は、margin-leftが適用される。
縦書きになった場合は、margin-startは、margin-topが適用されることになる。
このプロパティを使用することにより、同一のcssで縦書き、横書きの切替がスムーズになる可能性を持っている。
marginとautoとwidthの関係
marginに対して、autoを設定した場合は数値は0になる。しかし、横幅（width）を指定した状態で、marginの左右のどちらかにautoを指定すると、指定した方に数値を算出する。
ブラウザの幅が600pxの場合
div {
width:100px;
margin-left: auto;
}
上記の例なら、ブラウザの幅が600pxなので、margin-leftは自動で500pxになる。
marginの中央配置
横幅を指定した状態で、margin-left, margin-rightにautoを指定した場合。左右等分のmarginが算出され、ボックスは中央に配置される。
Negative Margin(ネガティブ・マージン）
marginの数値をマイナス指定することによって、要素を移動や、要素を配置する。パターンから外れたレイアウトを組む際に、お世話になることが多い。
ネガティブマージンを使用すると、レイアウトの幅が広がる。ただし、上記ソースの1つ1つの意味が、理解できていないうちは、多様すべきではない。
marginとpadding
marginでも、paddingでも、空間を開けることが可能。
margin,padding共に、空間を開けることができる。見た目は同じに見えるが、挙動は全く違う。
paddingは、背景色や、枠線にも影響して余白を開けることができるが、marginは要素ごとで間隔を開けることができる。
marginの相殺
paddingにはない機能として、marginの相殺がある。相殺はmargin同士が重なった場合に起こり、「marginが使いづらい」という印象を与える最大の理由かもしれない。
特定のケースだと、相殺が起きないなどすごい動きをする。
しかし、marginの相殺を理解することで、marginの単一方向の指定や、paddingを使用するよりも、HTML、CSSをクリーンに書ける場合も多くある。
paddingであれば、divの間は、10px+10px=20px となる。
marginは相殺によってdivの間が、10pxしかあかない。
相殺を理解するには、要素を人に例えると、以下のような感じになる。
・widthは、骨格
・heightは、身長
・borderは、皮膚
・paddingは、脂肪
・marginは心の距離
みたいなw
入れ子での相殺
相殺は入れ子の状態でも、marginが重なれば発生する。
両方ともにmarginが設定された場合、相殺が発生する。
入れ子の別の例
上記の例では、margin-topは、.parentの方が大きいので30pxが適用される。しかしmargin-bottomは、.childの方が値が大きいので40pxが適用されることになる。相殺が起こった場合は、大きい方の値が優先される。
相殺が起こらないケース
親の要素に特定のCSSを適用することで、子の相殺が発生しない。
・border（marginが指定されている方向）
・padding（marginが指定されている方向）
・overflow:hidden, scroll（auto, visibleは適用されない）
・position:absolute, fixed（relative, staticは適用されない）
また、floatも調べたが、今回はここまでにしておこう。
ご清聴ありがとうございました。
引用先（参考先）：https://kojika17.com/2012/08/margin-of-css.html
引用させていただきました。この記事に勉強させていただきました。ありがとうございました。
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
298日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 23, 2020
298日目 2h
・xdデザインカンプからのサイト模写
・ハンバーガーメニュー作成
・三本線を×印に#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode