投稿日：2020-03-23T20:42:05+09:00

Flexの覚書

はじめに

これはFlexのチートシートとしての覚書。

親要素に設定

flex-direction

小要素の並びの向きを決める

row（デフォルト）
横向き　向き：→

row-reverse
横向き　向き：←

column
縦向き　向き：↓

colmn-reverse
縦向き　向き：↑

flex-wrap

範囲に収まりきらなかった場合の処理

nowrap（デフォルト）
アイテムを折り返さずに一列に配置

wrap
折り返して表示。下に折り返す。

wrap-reverse
折り返して表示。上側に折り返す。

flex-flow

flex-directionとflex-wrapの設定を同時に行える。
flex-direction :row nowrap;がデフォルト。

justify-content

揃え方。どちら寄りになるかなどの設定。

flex-start（デフォルト）
子要素を左側に寄せる。

flex-end
子要素を右側に寄せる。

center
子要素を中央に寄せる。寄せるだけ。

space-between
左右にぴったり広げるように均等に配置。余白を作らない。

space-around
左右にアイテム間の余白と同じサイズの余白を開けつつ、広げるように配置する。

align-content

justify-contentの縦方向版。

align-items

垂直方向の位置を設定する際に使用。

stretch（デフォルト）
小要素の上下の余白を埋めるように、アイテムの上下を広げる。
小要素の高さを変更する。

flex-start
子要素の上辺を揃えて配置する。

flex-end
子要素の上辺を揃えて配置する。

center
子要素を中央に揃えて配置する。

baseline
子要素の文字のラインを揃えて配置する。

justify-items

align-itemsの横方向版。

子要素に設定

order

順番を設定できる。
デフォルト値は0。
マイナス値は設定不可。

flex-grow

伸び率を設定できる。
デフォルト値は0。
マイナス値は設定不可。

flex-shrink

縮み率を設定できる。
デフォルト値は0。
マイナス値は設定不可。

flex-basis

ベースとなるサイズの設定ができる。
デフォルト値はauto

flex

flex-grow,flex-shrink,flex-basisの設定を同時に行える。

align-self

親要素に設定するalign-itemsを子要素ごとに設定する際に使用する。
パラメータはalign-itemsと同一。

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-23T13:55:22+09:00

HTML,CSSでのwebサイト制作の手順とポイント

はじめに

本記事は

「progateやドットインストールなどでhtml、cssの文法的なインプットはしたが、いざwebサイトを作成する場合にどの手順を踏めば良いのか？？」

という人を初学者を対象にhtml、cssを使ってwebサイトを作る際の手順と、その際に念頭におくべき事をまとめたものです。

拙い内容だとは思いますが、参考になれば幸いです！

※本記事はデザインが既にできている場合の手順になります。
①~③の過程は実際にデザインツールか紙を使って書く事を強くお勧めします！！

①　デザインの全ての要素を隙間のない□で埋める！

ポイント

・全てを□で隙間なく埋め切る事が重要！

例赤線にて区切り

↓

② ①で区切った□をさらに1つ1つを細かいパーツに分ける

②-1　まずは大きなパーツから分けていく(青線)

②-2 大きなパーツの中を更に細分化できる所まで分けていく(緑線)

ポイント

・大きな□の中に小さな□が敷き詰められている状態になる
・この□の1つ1つがdiv要素であると考える！！(正確にはdiv以外のタグも使うが、、)

③　□の1つ1つに名前(class名)を付ける！！

③-1　赤線で囲った□に名前をつける

③-2　青線で区切った□に名前をつける

③-3　緑で区切った□に名前をつける

ポイント

・大きい部分から名前をつけていく(赤線→青線→緑線)
・名前は基本的に重複なく付ける
・全く同じパーツを複数回使うときは、同じ名前をつける
・名前の付け方(命名規則)はプロジェクト単位で行う→1人でのプロジェクトでないなら、名前を付けた段階でレビューを入れると良い！！

参考用：代表的な命名規則について

https://webdesign-trends.net/entry/9214

④　htmlで□をネスト構造(入れ子構造)で書いていく

例：上記のbody1部分
<div class="body1">//赤線
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
</div>//赤線
セマンティクスwebについて

セマンティクスwebはモダンなhtmlの書き方として、html5から導入された「より要素の内容に沿ったhtmlタグ使おうとする考え方」です！！
構造の綺麗なhtmlを書く事ができ、SEOなどの対策になります！！

先ほどのhtmlは分かりやすさ重視の為に、全ての要素をdivタグで囲いましたが、セマンティクスwebを導入するとdivの代わりに様々なhtmlタグを使用していく事になります。

例
<main class="body1">//赤線
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
</main>//赤線
htmlを書く際はセマンティクスwebを意識してhtmlタグを工夫すると良いでしょう！！

参考用：セマンティクスwebについての詳細

https://developer.mozilla.org/ja/docs/Glossary/Semantics

ポイント

・「赤線の要素→青線の要素→緑線の要素」が入れ子になるようにhtmlを書く
・htmlをまず書き出して、必要としている要素が全て出力されているかブラウザで確かめる

⑤　cssにてデザインを整える

htmlでブラウザ上に各要素は出力されているので、よしなにスタイリングして下さい。

まとめ

この手順は、「とにかくブラウザ上で成果物が目で見える状態にする。その上で細かいスタイリングを行なっていく！」という考え方に基いたものです。

こうする事で第三者に対して、早い段階から成果物の進捗を共有しやすくなったり、cssなどの挙動をブラウザでいちいち確認できるといった恩恵が受けられます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-23T08:45:46+09:00

UIkit3の拡張用CSSファイル(UIkit Plus α)を公開してみた

最近Web開発をする際のフロント側のCSSフレームワークに、UIkit3 をよく使用しています。(特に指定が無い限り)
個人的にBootstrapやMaterializeなどいろいろと使ってきましたが、自分的にこれが一番使いやすかったので。(あとデザインが好き)

ただしUIkitのみで全てを賄える訳ではもちろんないので、必要に応じて独自のCSS定義を追加するのですが、そういった時には決まって、

そういえば以前にも同じ定義を書いたなようなと思いつつ同じ定義をまた書く

以前作ったものを探してきてコピーして使用する

ということを繰り返してました。

そんな経緯から、なら 良く使うものをまとめてしまえ！ と思い至り、
せっかくまとめたのなら、どれだけ需要があるのか分かりませんが、 公開してしまえ！ とｗ
そしてUIkitがもっと普及するといいな。

というわけで公開したのが UIkit Plus α になります。
UIkit3の使用が前提となりますが、ご自由にお使いいただければと。

余談ですが、
昔は自分にもデザインはデザイナーさんの仕事だよね？と思っていた時もありました。
ただ最近はこういったCSSフレームワークの普及などにより、ある程度なら簡単にデザインが組めるようになり、開発時の線引きも曖昧に。
さすがにある程度はデザインをいじれないとマズイかなと思い、手を出したところ、、、見事にハマってしまいました。(笑)
開発するうえで、機能的な要件を満たすことは当然ですが、見栄えというのも大事ですよね。

UIkit Plus α

UIkit3と合わせて取り込むことで、少し拡張(使用できるCOMPONENTSを追加)することができます。
日頃の開発の中で今後も使いそうだなと思ったものをCOMPONENT化しています。(独断と偏見によりｗ)
同じくUIkitを使用する方の手助けになれば幸いです。
まだまだCOMPONENTの数は少ないですが、今後も随時COMPONENTを追加していく予定です。

使い方や追加されるCOMPONENTSの詳細は下記ページをご覧ください。
実際のデザインやサンプルコードを確認頂けます。
Document

「こんなCSS定義をよく使うんですけど」などを
GitHubのIssueに書き込んでくれれば、もしかしたら(もしかしたらですよ？)追加されるかもしれません。

UIkit Plus α で追加されるCOMPONENTS

Paragraph - 段落表示

Sub Text - サブテキスト

Box List - ボックスタイプのリスト

Border Table - 枠線タイプのテーブル

Titled Preformatted Text - タイトル付き整形済みテキスト

Side Fix Nav - 右上固定のナビゲーション

Floating Button - フローティングボタン

Margin Mini - 極小のマージン設定

Message Box - メッセージ表示

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-23T05:02:29+09:00

初心者によるプログラミング学習ログ 270日目

100日チャレンジの270日目

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

おはようございます
270日目
・webサイト模写
・noteの、コーディング教材1つ終了#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 22, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-03-23T01:59:26+09:00

モバイル画面でbackground-attachement: fixed; が効かない

モバイル画面でbackground-attachement: fixed; が効かない場合

ちょっとおしゃれなホームページを作ろうと思ったら、
簡単にできるものとして背景固定のパララックス風のページデザインがありますよね。

こんな感じのウェブサイト

その際は
hogehoge.css
body{
   background-image: url('hogehoge.jpg');
   background-attachment: fixed;
   background-size: cover;
}
とかで背景画像を固定するのが一般的かな？

が、実はこの
background-attachment: fixed;
iOSではうまく動かないんです。

正しくは、iOSモバイル画面で見てみると背景画面が固定されません、、、
background-attachment:fixed;とbackground-sizeはモバイルだと衝突するみたいです。

じゃあどうするの？ってことで
以下解決策

bodyに::before疑似要素で背景画像を指定!!
hogehoge.css
body{
   width:100%;
   z-index: 0;
}

body::before{
   content: "";
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 100vh;
   background-image: url('hogehoge.jpg');
   background-size: cover;
}
bodyの擬似要素(z-index:-1;)をbody(z-index:0;)の一枚裏におけばおk
content: "";
　
→　私のような初学者は『これ何？』とお思いだろうが、
::after とか ::before についてはcontentプロパティがないと要素として全く見えなくなります。
のでつけときましょう。

これで::beforeを使ったbackground-attachment: fixed;の画面を実装することができました。

モバイルでの背景固定パララックス風デザインを実装する際は是非ご参考に！

　 Tweet
Qiitaで続きを読む

20200323のCSSに関する記事は5件です。

Flexの覚書

はじめに

親要素に設定

flex-direction

flex-wrap

flex-flow

justify-content

align-content

align-items

justify-items

子要素に設定

order

flex-grow

flex-shrink

flex-basis

flex

align-self

HTML,CSSでのwebサイト制作の手順とポイント

はじめに

① デザインの全ての要素を隙間のない□で埋める！

ポイント

例 赤線にて区切り

② ①で区切った□をさらに1つ1つを細かいパーツに分ける

②-1 まずは大きなパーツから分けていく(青線)

②-2 大きなパーツの中を更に細分化できる所まで分けていく(緑線)

ポイント

③ □の1つ1つに名前(class名)を付ける！！

③-1 赤線で囲った□に名前をつける

③-2 青線で区切った□に名前をつける

③-3 緑で区切った□に名前をつける

ポイント

参考用：代表的な命名規則について

④ htmlで□をネスト構造(入れ子構造)で書いていく

セマンティクスwebについて

参考用：セマンティクスwebについての詳細

ポイント

⑤ cssにてデザインを整える

まとめ

UIkit3の拡張用CSSファイル(UIkit Plus α)を公開してみた

UIkit Plus α

UIkit Plus α で追加されるCOMPONENTS

初心者によるプログラミング学習ログ 270日目

100日チャレンジの270日目

モバイル画面でbackground-attachement: fixed; が効かない

モバイル画面でbackground-attachement: fixed; が効かない場合

bodyに::before疑似要素で背景画像を指定!!

日付別

タグ一覧

①　デザインの全ての要素を隙間のない□で埋める！

例赤線にて区切り

②-1　まずは大きなパーツから分けていく(青線)

③　□の1つ1つに名前(class名)を付ける！！

③-1　赤線で囲った□に名前をつける

③-2　青線で区切った□に名前をつける

③-3　緑で区切った□に名前をつける

④　htmlで□をネスト構造(入れ子構造)で書いていく

⑤　cssにてデザインを整える