使用したマークダウン記法
[#]
見出しとして使用
数を増やすとfont-sizeが小さくなっていく
HTMLでいうh1~h6タグ

[|文字列|]
表の作成として使用
コロンを文字列の左、左右、右につけることで左寄せ、中央揃え、右寄せにできる

[-]
箇条書きとして使用
ハイフンの後に半角スペースを入れること

テーブル設計

users テーブル

Column	Type	Option
name	string	null: false
email	string	null: false
password	string	null: false

Association

• has_many :room_users
• has_many :rooms, through :room_users
• has_many :messages

カラム、アソシエーションが一目瞭然なのでアプリケーション開発には必須の作業。

100日チャレンジの377日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
377日目は、

おはようございます
昨日の作業・やったこと⇩

●就寝前筋トレ5分、キンドル読書 10分
●ブログ1記事作成
●プログラミング学習377日目 2h

寝坊した。
間に合ったけど。#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 20, 2020

どうも7noteです。今回は文字に対して影を入れる方法をやっていきます。

文字に影を入れるcssとして「text-shadow」というcssが用意されています。今回はこの「text-shadow」を導入してみましょう。

text-shadowの使い方

text-shadowには4種類の値が指定できます。

「横方向の位置」・「縦方向の位置」・「ぼかし具合」・「影の色」

実際にcssを書く時は以下のように記述します。

p {
    text-shadow: 1px 1px 2px black; /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

見た目↓

text-shadow解説

text-shadow: 1px 1px 2px black;

上の例であげた指定ですが、まず一番左の値の1pxから見ていきます。
この1pxはテキストに対して何ピクセル横に影を付けるかという意味です。
そして2つ目の1pxはテキストに対して何ピクセル縦に影を付けるかという意味になるので、
今回であれば右方向に1px、下方向に1pxの位置に影を付けるという意味になります。

そして、3つ目の2pxはぼかし具合の指定になるので、上下左右に2px分広がるように影を付けなさいという意味になります。

最後に影の色を指定して、最終的な意味としてはテキストからみて右に1px、下に1pxの位置から上下左右に2xp分広がるように黒色の影を付けなさい
という意味になります。

デザインでありそうなパターンのサンプルコード

見本ではフォントサイズはどれも24pxを指定してます。

①くっきりした影

p {
    text-shadow: 3px 6px 0px #CCC; /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

②背景にぼやかしをいれる

p {
    text-shadow: 0px 0px 5px #FCA134; /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

③背面にぼやけた影

p {
    text-shadow: 0 15px 5px rgba(0,0,0,.5); /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

さらにたくさんのサンプルがみたい方はこんなサイトを見付けたので参考にしてもいいかもしれません。15個くらいサンプルがあります。
https://www.nxworld.net/tips/text-shadow-styling.html

まとめ

テキストに影をつける方法はこれしかないので、上手に使いこなせるようになりましょう！
ただ影だけ角度を斜めにするとかはできないので、そのような場合は画像にするのが無難でしょう。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

普通、画像を表示するときには<img src="./img/hoge.png">とか、<img src="http://example.com/hoge.png">とかやるわけですが、HTMLに直接書く方法があるようなので試してみました。

やり方

<img src="data:[<mediatype>][;base64],<data>">
画像はbase64エンコードするのが一般的です。

例. png画像を埋め込む場合

<img src="data:image/png;base64,<data>">

<data>のところには画像をbase64エンコードしたものを用います。変換は適当にオンラインサイトなりコマンドラインなりでできます。

外部ファイルの読込と速度を比較

Qiitaのファビコンを表示。検証はrepl.itのStarterプランでページをホスティングし、Googleの PageSpeedInsightsで「最大コンテンツの描画」にかかった秒数を3回計測して平均を取りました。

	file	data URL	備考
time(s)	1.0/0.3	0.8/0.2	書式はモバイル/パソコン
filesize(KB)	3.86	5.15

ファイルサイズは増加しましたが、描画されるまでの時間は短縮されました。サーバー環境にもよるとは思いますが、高速化する効果はありそうです。

メリット・デメリット

メリット

• Chrome extensionでアイコンを挿入する際に使われているのを目にしました。こうするとどこかに画像をホストしておく必要が無くなります。
• 若干読込が高速化されます。

デメリット

• ブラウザによって文字数に制限のある場合(例えばOpera 11ではエンコードされた文字列は65529文字まで)があるので、使えるのは軽いファイルに限ります。
• HTMLファイルが長くなるのでメンテナンス性が落ちます。例えば折りたたみ機能のないエディタで見ざるを得ない状況になったらきっと発狂することでしょう。
• データ転送量が増加します。

まとめ

dataURLでHTML内に画像を埋め込む事ができます。若干早くなりますが、デメリットも大きいので使い所は考える必要があります。

参考

インラインで画像をHTMLに埋め込むData URLスキーム at softelメモ

FlexBox（display: flex;）を使って、横並びのメニューを作る方法です。

index.html

    <ul class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
    </ul>

style.css

.nav {
    list-style: none;
    display: flex;
}

.nav li {
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #333;
}

.nav li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

• list-style: none; 黒丸を消します。
• display: flex; ボタンを横並びにします。
• line-height: 48px; テキストをボタンの上下中央に配置します。（heightと同じ値にします）
• text-align: center; テキストをボタンの左右中央に配置します。
• text-decoration: none; リンクの下線を消します。

参考リンク

【CSS3】横並びメニューの作り方（float編）
【CSS3】横並びメニューの作り方（inline-block編）

display: inline-blockを使って、横並びのメニューを作る方法です。

index.html

    <ul class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
    </ul>

style.css

.nav {
    list-style: none;
    font-size: 0;
}

.nav li {
    display: inline-block;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 16px;
    background-color: #333;
}

.nav li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

• list-style: none; 黒丸を消します。
• font-size: 0; ボタンの間にできる隙間を消します。（子要素でfont-sizeを指定し直します）
• display: inline-block; ボタンを横並びにします。
• line-height: 48px; テキストをボタンの上下中央に配置します。（heightと同じ値にします）
• text-align: center; テキストをボタンの左右中央に配置します。
• text-decoration: none; リンクの下線を消します。

参考リンク

【CSS3】横並びメニューの作り方（float編）
【CSS3】横並びメニューの作り方（FlexBox編）

まえおき

どうも、最近運営しているプログラミングスクール「ウェブカツ!!」を売却しようとして「40億で売れる？」ってIT業界で有名なM&Aエージェントに相談してみたら「25億が現実的な落とし所ですねー。。」と渋い顔で言われてしまった、かずきちです。

一時、ベンチャー経営者やアンチがうちの生徒雇わない発言して物議を醸しましたが、一向にうちの生徒の内定報告いただいている状態で何よりです。
今年の秋口からは、うちの本が続々と出ます。
SNSマーケの口コミのみで、広告やSEOすらやってなかったので、もう
伸び代しかないですね。（ケイスケホンダ選手風）

アクティブで一時期１５００人超える勢いだったんですが、安っぽいアフィリエイターみたいな副業気分で学ぼうとしてる甘っちょろい人間も増えてたので、僕が相当生徒数削りました。事業やってて思うのは、やっぱ費用が安いと意識の安い人間が入りますね。
（安くしちゃえば1万人は超えるし、売り上げも上がるのは分かってますが、その分しょうもないエンジニア増やしてもなという。）

因みにうちで身に付くレベルがどれかというと卒業したばかりの生徒達が作ったものを一部お見せするとこんな感じです。

ウェブカツ卒業生に仕事として頼んだ実際に世に出されるサービスをご紹介。
卒業するとこれくらいのものが作れるスキルがつくってこと。
ちなみに外部の別サービスとシステム連携までしてます。
要は仕事として十二分に頼めるレベルってことです。#ウェブカツ #ウェブカツ女性割引 pic.twitter.com/MWnH578PC0

— かずきち@プログラミングスクール経営者 (@kazukichi3110) February 24, 2020

業界未経験のウェブカツ生徒達がチーム開発で作ったサービスが近々リリースされます
ビジネス要件、市場調査からプロとして本当に必要なものを教えてますが、もう未経験とは言わないよね、これ#Progate #テックアカデミー #techacademy#テックキャンプ#侍エンジニア塾#SkillHacks #デイトラ pic.twitter.com/qTCdXMEErm

— かずきち@プログラミングスクール経営者 (@kazukichi3110) June 29, 2020

https://itengineer-scouter.com/
※このサービスは、今は余力がないので運営ほったらかしてますが、スクールや教育が増えれば今後確実に定量評価出来るものが必要になるんでコンテンツちゃんと考えれば伸ばせるやつ。
競合ではpaizaとかあって僕もやりましたが、あれってエンジニアとしてのお仕事で使う技術能力とはかなりかけ離れちゃってるんですよね。技術というより数学テストだし。

うちは他スクールと違って、生徒に「作品」を作らせることはしてません。
だって、仕事としてお金もらってやってるのって
「商品」を作ること
ですから。

趣味レベルのものを作ってもしょうがないんですよね。
「商品」として成り立つレベルが作れなきゃ。

うちの生徒には元医師やらBIG4税理士法人、大手金融機関、大手メーカー勤めの高学歴な人〜中卒、40代主婦まで、地域は北海道から沖縄果てはフィリピン、マレーシア、インド、デンマークといったバリエーション豊かな人達が学んでいます。
（中卒も40代主婦もきちんと内定もらって今はエンジニアとしてバリバリやっているので、これからフリーランスで稼いでくれるのが楽しみです）

余談ですが、最近テック〇〇の面談受けた人がまた入ってきたんですが、営業に
「都内に出てこれない人は本気度が低いから無理だよ」
と言われたそうです。（うちは地方でも内定決まっているというのに。。）
都内が案件多いとはいえ、斡旋して自分らの利益にしたいからとはいえ。ね。
まぁ、正社員の斡旋するだけで、年収の3割もらえるんで、一人100万以上入ってくるものね。
そりゃ、売り上げ主義でいけば都内就職者だけ扱いたいよね。

「はたらくプログラミング」を作りたい！

前置き長くなりましたが、そんな中で今回うちの生徒（今は卒業生）で「ちょっと昔趣味で漫画描いてた」という人に

「はたらく細胞」みたいにプログラミング版を作りたいんだけど出来ない？

とお願いし、それがようやく完成。反響も上々なようで今回その製作の裏側をご紹介したいと思います。

【漫画】はたらくプログラミング 第1話 (1/5) pic.twitter.com/WI7ywZKty1

— とりたす (@yuudori) March 11, 2020

amazonとboothで現在発売中です。
https://www.amazon.co.jp/dp/B087Z6J1RZ/ref=cm_sw_r_tw_dp_x_-qQfFbBE70Y32

「はたらくプログラミング」を作ろうと思った経緯

僕はいわゆる「ガチエンジニア」じゃ決してありません。
技術自体が全く好きではありません。
異業種の営業マンからエンジニアに転向する際の独学で、このITエンジニア業界の
「教育能力なさすぎ」
「伝えるスキルなさすぎ」
「ビジネス、マーケティング能力なさすぎ」
の３拍子にイラッとし、その改革のためにスクールを立ち上げた（昔はただの動画サービスだったけど）わけですが、そんな中でずっと

漫画で学べりゃ楽なのになぁ

と思っていました。
僕は漫画大好きなんですもの。字とか嫌い。
スクールも全て動画で教えているくらいですしね。

が、漫画を書くスキルはもちろんないですし、そもそもどんな漫画にすりゃいいのか思いつかなかったんですね。
そんなある時、出会っちゃったわけですよ、あれに。

「はたらく細胞」

ですよ。
これを読んだ瞬間、降りてきちゃったわけです。

神が。

これだ！って感覚です。

「はたらく細胞」をパインスパイアしよう！

そう思ったわけです。
神の命です。

「はたらく細胞」をパクインスパイアしちゃいなさい。

そういう神の命を頂いたわけです。

何をどういう順序でどういう世界観で伝えるか。それが重要だ。

とはいえ、「プログラミングを擬人化する」というところまではきたんですが（まぁ、調べたらそういう擬人化した漫画ちっくなものはありましたが）、それぞれをどう伝えるか悩みました。
実際、わかばちゃんシリーズであったりコード学園ってのがありましたが、どっちも僕が求めるものとは違ったんです。

ちなみに僕はいわゆる「オタク」が好きそうな萌え系キャラが大嫌いです。
エンジニア界隈では好かれるでしょうが、僕のような一般人からしたら気持ち悪さしかないんですね。（申し訳ないけどそれが本音だよ）
だから、そんな擬人化キャラにはしたくなかったですし、わかばちゃんのような4コマ漫画では、はたらく細胞のように

難解な専門知識を漫画としてストーリー仕立てで各キャラの個性や世界観も感じながら楽しみながら学習したい

という僕の堕落し甘えきった目的には到達できなかったんです。
だって、あれは漫画部分が一部あるだけの「解説本」ですし。
初心者の頃の僕はコードが出てきた段階で拒絶反応ですしね。
一番の初心者ってそっからなわけで。

僕はエンジニアが大嫌いだ

そもそも、僕は異業種の人をエンジニアとして育ててこの業界に送り込みたいんです。
だって僕は

エンジニア大嫌いなんですもの。

でも、

エンジニアは大好きなんです。

言ってること分かります？

営業やってた僕からすれば、エンジニアという職業は指動かしてるだけで金もらえるわ、
リモートも出来るわ、
ヘッドフォンしながら仕事出来るわ、
スマホいじりながら仕事出来るわ、
短期間で一気に報酬上げられるわ、
自動化して自分で金稼げるわ
で「天国」なんですよ。
エンジニアで月100万稼ぐのと営業で月100万稼ぐのじゃ天と地ほどの差な労力です。
女性ならライフステージによっても他の仕事より融通効きやすいだろうしね。
（女っ気なくてむさ苦しい現場が多いのが残念だけども。うちのスクールの女性比率はかなり高いので女性生徒からすると現場出てみて女性が少なすぎる現状にびっくりするみたいです。）

でも、僕のQiitaやらTwitterやらにウジのように湧いてくるキモいエンジニアは嫌いなんですよ。
教え方下手くそなエンジニアも、ビジネスもわからない子供エンジニアも嫌いなんですよ。
商品より作品作りたがったり、顧客課題をすっぽかして技術情報だけで鼻息荒くしてるエンジニアも大嫌いなんですよ。

だから、もうこの業界変えるには既存エンジニアより異業種のコミュケーション能力高い人や素養ある人に営業もビジネスも税務も法務も教えてエンジニアも並より上のスキル教える方が大事だと思っているわけです。
（最近、SNS訴訟に強い弁護士が教えてくれる法務部がうちのスクールに出来ました。営業部も日本で唯一大学で営業を学問として教えている生保で元億プレーヤーの花田敬さんに見てもらってます。）

なので、そもそも

プログラミングって何それ？聞いたことあるくらいだけど

な人たちでも読みたくなるようなものを作りたかったんですね。
売れない営業マンが漫画喫茶で手にとって読めるレベルのやつが。
そんで、あわよくば

「あ、プログラミングって面白そうかも」

と思ってくれりゃあ御の字っていう。

まぁ、とは言え、結構細かな技術部分の違いも入れて作ってるので、プログラミング学習中の人でもためになる内容になってます。
なので、各スクールさんで補助教材の１つとして使えたり、プログラミングが小学校必修となって親御さんなり教師がプログラミングがどんなものか学ぶ第一歩としても役立つと思います。
（実際に今有名な出版社さんから、うちの持ち出しなしで出版依頼も来てます）

世界観どうしよう

ターゲットも定まったところで世界観どうしようか悩みました。
ちなみにこの漫画は「漫画を読みながらWEBプログラミングの世界を学べる」ようにしたかったので、擬人化は
・HTML言語
・CSS言語
・JavaScript言語
・PHP言語
・SQL言語
を出そうと思ってました。
それぞれの言語の役割がざっくりイメージ出来て、自分たちが普段見ているHPが表示される中ではこんなやり取りが行われているんだという通信の流れもイメージできればいいなと。
（あとあとでRubyも出すことにしました。どんな登場でどんなキャラかは漫画でのお楽しみで）

まぁ、キャラの動かし方としては、二郎系インスパイアの感じにしかならんだろうなとは思っていたので、
あとは色々とやり取りを重ねていくうちに世界観が見えてくるようになりました。

HTML言語のキャラをざっくりどうするか

キャラ設定的なのどうするか考えていったんですが、
htmlはwebの根幹みたいなもんでしょう。
建築で言えば「基礎工事」や「家の骨組み」を作る人なわけなので、

熱血漢なてやんでぇ大工職人

という感じになりました
まぁ、ベタですが変に凝ると初心者がそもそも入っていけない世界になっていっちゃうので、ベタな王道で行くことにしました。

css言語のキャラをざっくりどうするか

cssは骨組みだけの簡素な家に外観つけて華やかにしていく美術さん的な感じですね。
ここらへんもベタに行きたかったので、お色気担当を入れることになり、

お色気のある大人な美術担当の女性

にすることになりました。
ストーリー内でも、htmlが土台を作り、cssが装飾を行う。という実際のweb制作の仕組みと同じにしています。
（こんな女性が実際の現場にいて欲しいと切に願ってます）

js言語のキャラをざっくりどうするか

これは、はたプロ（はたらくプログラミング）作りたい！ってちょろってツイートした時に
「言語を女性に全て擬人化したらこんなんだよね」
ってのが生徒からもらってたんで、それが採用されました。

jsはまぁフロントやってる人なら分かりますが、javaなりphpなりといった言語と違って標準のオブジェクトをぶっ壊す事も出来てしまうし、型とか関係なく放り込めるし、

ある意味柔軟で自由奔放、ある意味で大雑把

みたいな言語なので、そのまま
自由奔放でガサツで未熟感のある女性
になりました。
たぶん、B型女性かO型でしょうね。
僕はA型なんで、たぶん合わないです。
（振り回されてみたい願望もあるけど）

また、このjsちゃんをメインキャラに据える事にしました。
まぁ、うちのスクールがそもそも
バックも分かるフロントエンドエンジニア
を創出してるので、自然とjsメインになった感じです。
今後のテクノロジー成長の事も考えるとnodeもあるし、業務システムなどにある様な無機質な「システム」ではなく「サービス」としての価値勝負になっていき、UIリッチ、UXリッチでSPA化が当たり前になり、バックはAPIのみで簡素化されていく事を考えるとフロントエンド案件が今後どんどん増えていくのは必死ですしね。

つづく

floatプロパティを使って、横並びのメニューを作る方法です。

index.html

    <ul class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
    </ul>

style.css

.nav {
    list-style: none;
}

.nav li {
    float: left;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #333;
}

.nav li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

• list-style: none; 黒丸を消します。
• float: left; ボタンを横並びにします。
• line-height: 48px; テキストをボタンの上下中央に配置します。（heightと同じ値にします）
• text-align: center; テキストをボタンの左右中央に配置します。
• text-decoration: none; リンクの下線を消します。

参考リンク

【CSS3】横並びメニューの作り方（inline-block編）
【CSS3】横並びメニューの作り方（FlexBox編）

はじめに

こちらは
180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで)
を参考にSESエンジニアがWeb開発できるまでの備忘録です。
開発者になりたい！！！！！っていう反骨心が自分のモチベです。
毎日続けていきたいので、どんなに少なくても投稿していきたいと思っています。
投稿できなかったらごめんなさい。
現状はatomでhtmlを書いています。

今回は何やった？

ざっくりと以下の内容を学び直しました（Progate中級までで似たようなことを少しやった経験あり）
1.HTMLの要素（pタグとかclassとか）
2.HTMLの構造（head,title,bodyとかの構成要素とか）
3.マークアップ（今このQiitaでも使っているものですね）

何を学べたか？

サイト自体の学習内容ではないのだが、atomを利用している際に
「閉じタグ毎回書くの面倒だなー」
と思いググってみたら閉じタグのプラグインを入れて試した時の衝撃ですよ。

タグ入れた後、</まで入れたとこで欲しい閉じタグのul君がビターーーっと一瞬で入って感動しましたね。
自分もこんな便利なプログラム書いて人に便利だなって思われるようになりたいと思った今日この頃です。

どんなものできた？

こんな感じ

猫がデカすぎる
画像の縮小とかの方法はおいおい学んでいきます、やった記憶あるけど忘れてしまった・・・

CSSでの位置指定は、webサイト作りの基本中の基本。
見栄えを良くするために、要素の位置を自由に決めたい場面は多い。

だが、HTML/CSSを学習し始めた方には分かりにくい部分でもある。

そこで今回は、CSSで要素の位置を調整するときに使うpositionプロパティについて解説する。

positionとは

positionとは、要素の位置を決めるためのプロパティのこと。

HTMLのブロック要素は基本的に縦並びで、floatやflexboxなどを使う事で横並びにする事ができる。
大まかなレイアウトはこれで対応できるが、細かく要素の位置を指定したいときにはpositionを利用する。

CSSで位置を指定する書き方

positionの書き方

positionプロパティはこう書く。

要素 {
position: 値;
}

 

値の部分には「static」「relative」「absolute」「fixed」のどれかが入る。この値によって「どの様にして位置を決めるのか」を指定することができる。

• static: positionの初期値。位置を決める方法を指定ない。
• relative: 今の位置を基準として、相対的な位置を決める。
• absolute: static以外のpositionが指定された親要素の位置を基準として、絶対的な位置を決める。
• fixed: ブラウザウィンドウを基準として、絶対的な位置を決める。画面をスクロールしてもその場所に固定されたまま。

位置を調整するtop・bottom・left・rightの使い方

positionの値で指定した位置の決め方に従い、実際にどれだけ動かすのかを決めるのが 「top」「bottom」「left」「right」。

• top: 指定した位置の「上」からどれだけ動かすかを決める
• bottom: 指定した位置の「下」からどれだけ動かすかを決める
• left: 指定した位置の「左」からどれだけ動かすかを決める
• right: 指定した位置の「右」からどれだけ動かすかを決める

実際に指定するときは、positionと組み合わせて「top, bottomのどちらか」と「left, rightのどちらか」を指定する。

例えば、「sample」というクラスの要素を今の位置を基準として上から10px, 左から20pxのところに要素を移動する場合は、以下の様にCSSを記述。

CSS

.sample {
position: relative; /* 今の位置を基準 */
top: 10px; /* 上から10px */
left: 20px; /* 左から20px */
}

 

この値はposition: staticの時には指定することができないので注意。

positionの値と位置指定の方法

ここからはもう少し詳しく、positionの値によって要素がどう動くのかを説明する。

position:static - CSSで何も記載しないときの初期値

staticはpositionの初期値。CSSで何もしていないときはこの値になっている。

例えば、縦横が300pxの赤い要素と、縦横が100pxの黒い要素（今回はdiv）をstaticを使って配置してみよう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>sample</title>
</head>
<body>
<div class="red"></div>
<div class="black"></div>
</body>
</html>

 

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: static; /* staticを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
}

 

結果

この様に、縦にすき間無く並んだ状態になる。

staticは、位置や重なり（z-index）を指定しても反映されない。
例えば黒の要素を右へ10px動かそうと

.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
left: 10px; /* 左から10px移動する */
}

と書いても移動しないので、要素を移動させたい場合は、relativeやabsoluteにする。

position:relative - 相対的に位置を移動させたい時に利用

relativeは、今の位置を基準として、相対的な位置を決めるときに使う。


まずはrelativeを指定してみよう。
(HTMLはstaticと同じなので省略)

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
}

 

結果

見た目はstaticと変わらない。
では、ここから黒い要素を「上から10px」「左から20px」動かしてみよう。

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
top: 10px; /* 上から10px移動 */
left: 20px; /* 左から20px移動 */
}

 

結果

赤い要素にピッタリくっついて並んでいた黒い要素が、本来の表示位置から移動したのが分かるだろうか。

この様に、position:relativeはstaticと比較して

• top・bottom・left・rightを指定しなければstaticと同じ見た目になる
• top・bottom・left・rightを指定すると、位置を調整できる

という違いがあることを覚えておこう。

position:absolute - 親要素を基準として絶対的な位置を調整

position:absoluteは、親要素の位置を基準として絶対的な位置を決める事ができる。

まずは幅400px、高さ300pxのグレーの親要素の中に、1辺が150pxの赤い箱と1辺が100pxの黒い箱の要素を入れよう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet"href="style.css" />
<title>sample</title>
</head>
<body>
<div class="parent">
<div class="red"></div>
<div class="black"></div>
</div>
</body>
</html>

 

CSS

.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
}

 

結果

postionを何も指定しないと、グレーの要素の中に、赤い要素と黒い要素が縦に並ぶ形になる。

では、黒い要素の位置をabsoluteにし、左上を基準とするためにtopとleftを0にしよう。
absoluteは「親の要素がstatic以外の時に、親要素を基準とする」ので、親要素であるparentにrelativeを付ける。

CSS

.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
position: relative; /* 親要素にrelativeを指定 */
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
top: 0; /* 上を基準 */
left: 0; /* 左を基準 */
}

 

結果

黒い要素の左上が、グレーの要素の左上と重なるように移動した。
今回はtopとleftを指定したため、基準が「親要素の左上」になっているが、例えば親要素の左下を基準としたい場合はこのように書く。

CSS

.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
bottom: 0; /* 下を基準 */
left: 0; /* 左を基準 */
}

 

結果

この様にabsoluteは他の要素は無視して、親要素を基準とした絶対的な位置を指定することができる。

position:fixed - 位置を固定

position:fixedは、画面を基準とした位置に要素が固定される。
例えばスクロールしても位置が変わらないヘッダーや、縦に長いページでよく見かける「上に戻る」ボタンなどで利用されている。

指定方法はabsoluteと同じだが、基準が親要素では無くブラウザウィンドウである事に注意。

positionを使った位置調整を練習しよう

CSSで思い通りに位置を動かせるようになるためには、実際にコードを書いてみるのが一番である。

ウェブカツでは、HTML/CSSの基礎を練習できる鬼練を無料で公開しているので、チャレンジしてみよう。
https://webukatu.com/wordpress/blog/1833

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/

最初に

出品機能を実装中、プレビュー画像をlabel-boxと横並びにしたかった。

原因

flex-wrap: wrap;で折り返されていた...
flex-wrap: nowrap;に変更。単一行に押し込むという形で横並びにすることが出来ました。

flex-wrapプロパティについて

フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定するプロパティ。
横並び!横並び!と考え方が凝り固まっていました。
横並びの方法はfloatやinline-blockしか思い当たらず参考アプリの検証ツールで原因に気づくことが出来ました。
思いがけない自分の記述で手間取ってしまったので、コードを修正するときは広い視野を意識していきます。

参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap