どうも7noteです。CSSを簡単にmin化させて軽量化できるツールを紹介。 WEB制作において、ページの読み込み速度は命に関わります。（そこまでではないです。） 画像を圧縮しておくのと同様に、理論上はソースファイルも1文字でも短いほうが読み込み速度は上がります。 そんなときに目でいちいちチェックしていられないので、CSSを1クリックで圧縮してくれるWEBツールを紹介。 【1クリックでCSSを圧縮できるオンラインツール】 使った結果 約50行、約617文字(スペース含む)をmin化してみました。 その結果、 「667バイト」 → 「531バイト」 約80%にまで抑えることができました！ データ容量を2割カットできたことになります！ 使い方・注意点 「使い方」 左側の「Input CSS」と書かれた欄に作成したCSSをコピペします。 ↓ その少し下に「Minfy」と書かれたボタンがあるので、そのボタンをクリック。 ↓ すると右側の「Minified Output」に圧縮されたCSSが表示されるので、「Copy to Clipboard」と書かれたボタンでコピーして、任意のファイルに貼り付けて保存すれば完了！ ※変更（省略）される箇所 改行 半角スペース等 インデント(Tabやスペース) コメントアウト プロパティがないセレクタ 各セレクタのプロパティの最後のセミコロン(;) その他不要な文字（誤って入った全角スペース等） 「注意点」 重複した内容（プロパティやセレクタなど）は消えない minファイル化した場合、後で修正がしにくい。 minファイル化するのであれば、「style.min.css」などファイル名を変えて保存し使用するのがオススメ。 まとめ メリットは圧縮することにより、少しですがデータの軽量化に繋がり、ページの読み込み速度の改善に繋がります。ただCSSだけで圧縮できるデータ容量には限界があるので、これも行いつつ、ソースの見直しや画像の圧縮も同時並行で勧めて行く必要があります。 今回紹介したオンラインツールだけでなく、SASSファイルをコンパイル時に自動的にmin化して保存する方法や、その他ツールなど様々な方法があるので、自分の開発環境にあった方法を試してみてください。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

■　はじめに この記事は私の知識量を増やすため行うものです！ こちらの記事はCSSの情報となっています。 ■　vertical - align とは テキストや画像などの内容の上下方向の揃え位置を指定するもの。 この表現だけではピンと来ないかもしれません。 なので、今回はイメージ図を用意しましたので御覧ください。 ＜ イメージ図 ＞ vertical - align を使用する前　↓ vertical - align を使用後　↓ ご覧になりましたでしょうか？ ちょっとした差かもしれませんが、この差があとあとビュー作成に役立ちます！ 今日の投稿は以上です！ ありがとうございました！

グローバルナビのコーディングに参考にしました CSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 https://wemo.tech/2320#index_id1

0. はじめに 　案件などで稼ぎたいときにエンジニアはポートフォリオを作成するだろう。そして誰もが躓くのが公開(以下デプロイ)だ。今回は無料でサーバを利用できるHerokuでポートフォリオをデプロイする方法について紹介する。デプロイにはgitを用いる。 1. 準備 　今回はPHPを用いてデプロイしていく。「PHP使ったことない」という人でも簡単に実装できるから身構えないでほしい。 　まずはじめにポートフォリオ用のディレクトリを作らず、他のHTMLファイルなどが混在している場合はポートフォリオ用のディレクトリを作成し、ファイルを入れる。ここで、HTML用、CSS用等ディレクトリを分けている場合は、HTMLファイルポートフォリオ用ディレクトリ直下に移動する。(HTMLファイルが複数ある場合はトップページのファイルのみ) 　以下のようなファイル構成にしてほしい。(HTMLやCSS等をディレクトリに分けなくても良い) dir Portfolio/ ├ "ファイル名".html ├ HTML/ │ └ "ファイル名".html(あれば) ├ CSS/ │ └ "ファイル名".css └ JavaScript/ └ "ファイル名".js 2. PHPファイルとjsonファイル作成 　PHPのファイルを作成する。ポートフォリオ用ディレクトリ直下にindex.phpというファイルを作成し、以下を入力する。(ファイル名がindex.phpでないとサイトを開くことができない) index.php <?php include_once("'ファイル名`.html"); ?> 　次にjsonファイルを作成する。サイトの設定などを記入するファイルである。ポートフォリオ用ディレクトリ直下に'composer.json'を作成し以下を入力する。(ファイル名が'composer.json'でないとサイトを開くことができない) composer.json {} 3. デプロイ 　ここから実際にサーバー上にファイルを置きデプロイする。shellを開きカレントディレクトリをポートフォリオ用ディレクトリに移動、以下コマンドを叩く。 shell heroku login heroku create "アプリ名" git init git remote add heroku https://git.heroku.com/<アプリケーション名>.git git add . git commit -m "first commit" git push heroku master 　エラーが起こらなければデプロイ完了だ。デプロイしたサイトを開くにはheroku openコマンドで開くことができる。 4. まとめ 　今回は静的サイトをHerokuにデプロイする方法を紹介した。ポートフォリオをデプロイする際に参考にしてほしい。

Flexboxを使って国旗を作る 今回は中央アフリカ共和国の国旗　 黄色の星は省きます 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！　何をどんな風に、どうやって作るのか？ 　最初にある程度決めておくと後が楽になります。 　例　中央アフリカ国旗を調べる 　　　<div>は何個必要なのか？ 　　　class属性名はどうしようか？ 　　　 ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <div class="african1"> <div class="afr"> <div class="africa afr3">box1</div> <div class="africa afr4">box2</div> <div class="africa afr5">box3</div> <div class="africa afr6">box4</div> </div> <div class="afr1">box5</div> <div class="afr"> <div class="africa afr3">box1</div> <div class="africa afr4">box2</div> <div class="africa afr5">box3</div> <div class="africa afr6">box4</div> </div> </div> .african1 { width: 450px; height: 300px; background-color: pink; border: 1px solid black; } .afr3 { width: 185px; background-color: blue; } .afr4 { background-color: white; } .afr5 { background-color: green; } .afr6 { background-color: yellow; } .afr1 { width: 30px; background-color: red; } この状態を一旦ブラウザで確認　↓ この状態にFlexbox のdisplayboxをつけます .african1 { width: 450px; height: 300px; background-color: pink; border: 1px solid black; display: flex; ※追加 flex-direction: row; ※追加 } boxが横並びになりました　↓↓ 次に『box1,2,3,4　＆　.afr 』にFlexアイテム（子要素）をつけるため 『box1,2,3,4』の親要素にdisplay: flexとflexコンテナー（親要素）をつけます .afr { display: flex; ※追加 flex-direction: column; ※追加 } flex-direction: column; をつけたので変化なし 『.afr3,4,5,6,1』にFlexアイテムの　flex-grow をつけます .afr { display: flex; flex-direction: column; } .afr3 { width: 185px; background-color: blue; flex-grow: 2; } .afr4 { background-color: white; flex-grow: 2; } .afr5 { background-color: green; flex-grow: 2; } .afr6 { background-color: yellow; flex-grow: 2; } .afr1 { width: 30px; background-color: red; flex-grow: 1; } flexコンテナー　と、flexアイテム　を使って完成しました！ 最後に「文字」を消して完成です ↓ まとめ Flexコンテナー　と　Flexアイテム　の両方を使用しました。 Flexアイテム　を使うため、敢えて『親要素』にFlexコンテナーを使いました Flexアイテム　を使うためにはdisplay: flex; を付ける必要があります 見落としがちで、display: flex;　を付けずに　Flexアイテム　を付けてしまい 挙動が反応しない現象に陥ってしまうので注意が必要です 引き続きFlexbox の基礎を理解して自由に使えたら嬉しいです 今回は以上です！ ありがとうございました

パララックス背景を実装してiPhoneで見てみたら上手く動かなかったので、調べてみたところ、background-attachiment position:fixed;で背景を固定するやり方は、iOS端末では対応していないことがわかった。 そこで上記のCSSを使わずにパララックス背景にする方法を調べて、上手く実装できた。 パララックス背景とは パララックス（視差効果）は、近年のWEBサイトでよく見る「背景が固定」されているものである。 ChatWorkのサイトでも実装されています。（2021年4月現在） 背景を固定することで、Webサイトに視覚の差異やスピード感・奥行きを演出できます。 おしゃれなサイトにはもってこいの表現技法です。 本題 まず、最初に一般的なbackground-attachiment:fixed;を使ったやり方の場合。 <div class="example"> <p>test</p> </div> .example { background-image: url(./img/example.jpg); background-attachment: fixed; } divに付与したexampleというクラス内で、example.jpgという背景画像を指定。 そこにbackground-attachment:fixed;を置くことで、背景画像を固定していますね。 そのため、スクロールすると背景は動かず周りの要素だけが動くので、不思議な感じになります。 しかし！！！！ これをSafariから見ると、なぜか背景はbackground-attachment:fixed;する前の状態のままなのです。。。 調べてみると、下記の記述があるサイトを見つけました。 iOS端末では「background-attachment: fixed」は効かないらしい 「background-attachment」は、スクロールする時に背景画像を固定したままにするか、 スクロールに合わせて移動させるかどうかを指定するためのれっきとしたcssプロパティです。 なので、このプロパティが間違った記述というわけではありません。 ですが、この「background-attachment」と一緒に「background-size: cover」というプロパティを一緒に記述すると、iPhone端末でバグが発生してしまいます。 これは公式でも確認されているiOSの不具合らしいです。 引用元：【パララックス・iOS】background-attachment: fixedがスマホで効かない！？原因と解決法を解説 結構簡単に対応できました 記述し直さないといけないのではないか、と倒れそうになりましたが 結構すぐに対応できました！ 擬似要素のbeforeを使用していきます。 まず、先ほどのCSSの一個上に親divを追加。 <div class="example"> <div class="example-children"> <p>test</p> </div> </div> 追加した親divに擬似要素beforeを追加します。 .example::before { content:""; display:block; position:fixed; top:0; left:0; z-index:-1; background-image: url(./img/example.jpg); position: fixed; } 背景をposition:fixedで背景画像固定して、 他の要素が上に重なっているみたいなイメージです。（多分） なので他の要素より一個下に表示させるため、z-index:-1;をつけています。 また、他の要素も、白背景でもきちんとbackground-color: #fffってやらないと 背景画像がずっと見えてる状態になりますのでご注意を。。。 これは一部分だけパララックス背景にする場合に使えます。 複雑にパララックスが入り組んだサイトにする場合は、JQueryとか使う方が早いかもです。