それぞれの基本的な使い方と注意点をきちんと伝えていきます。今回は難易度高めです。以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。blog.mimipen.netCSSとは?ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。CSSの基本構造h1タグにCSSを使って見た目を指定した場合。32px;}セレクタ:どこのデザインを変更するか(※h1タグ)プロパティ:どの要素に変更を加えるか(※font-size=文字の大きさ)値:どのように変えるか(※32pxという大きさに変える)HTMLファイルにCSSファイルを読み込ませる方法HTMLファイルのhead内に以下を記述します。href="[CSSファイル場所]">CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。inline-blockを指定します特徴としては、要素が左から順に並び、要素が親要素の幅を越えると改行されます。指定するだけだと隣り合う要素の間に余白が入ります。※余白を取り除く方法は以下で解説しています。昔からあるプロパティなので、ブラウザ対応は基本的に考えなくていいと言えます。指定するだけだと要素同士に余白が入ってしまうんです。0または、letter-spacingを使う方法があります。余白と一言で言っても、ブラウザごとに余白の大きさが違います。ブラウザごとに余白の大きさが違うとは?クロームで余白分を考慮して、width(幅)を指定しても他のブラウザ(サファリ)で崩れてしまうことがありました。rightを使用しますFloatは、Floatを使用すると親要素の高さが出ません。※親要素の高さの出し方は以下で解説しています。要素の高さが変わる場合、このプロパティはおすすめしません。以下のように回り込んでしまいます。言った場合にFloatを使うのでしょう。私がよく使うレイアウトは以下のような場合です。both;}Floatの注意点Floatは崩れやすいプロパティとも言われており、ただ横に要素を並べる場合は使用をおすすめしません。先ほどのように2つの要素を両サイドに並べるレイアウトの場合はこのプロパティを使うと良いでしょう。Floatの特徴として親要素の高さが出ないという特徴があります。この場合ば以下のコードを親要素に指定します。※cfというclass名にclearfixと呼ばれる指定をしています。bothのみでの指定はおすすめしません。当ブログでは非推奨なので紹介することはないと思います。Flexboxの基本的な使い方Flexboxは、CSSプロパティの指定方法が根本的に違います。これまでは、変化を加えたい要素にプロパティを指定してきましたが、親要素にプロパティを指定します。上級者向けのプロパティで、覚えることが多いのですが、その分できることもたくさんあります。この記事では全て紹介できないので使いやすそうなものだけ紹介します。Flexを設定した親要素が「Flexコンテナ」と言われるものに性質を変え、その子要素は自動的に「Flexアイテム」と呼ばれるものに変わり、親要素に対するFlexプロパティの設定によって、要素の配置、順番を柔軟に変更できるようになります。25%;}ブラウザ対応を考える※ベンダプレフィックス※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。space-between;}ブラウザ対応を考える※ベンダプレフィックス※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。25%;}ブラウザ対応を考える※ベンダプレフィックス※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。25%;}上記の記述で高さは揃いますが注意点もあります。リンク付きのボタンを横に並べる場合、flexアイテム子要素のaタグの高さが出ません。指定すると親要素の高さになります。aタグがflexアイテムの子要素の場合は指定しても反映されません。指定することでaタグにも高さが出るようになりました。※わかりやすいように、aタグに薄い白色を指定しています。/*子要素にも指定*/}ブラウザ対応を考える※ベンダプレフィックス※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。便利なプロパティなのですが、仕事として使うのには致命的な注意点があります。以下のサイトで問題ないとの表示にはなってますが、ブラウザでのバグがまだあるなという印象です。対応状況https://caniuse.com/#feat=flexbox便利で私自身使いたいのですが、自信を持って使おうと言えないのが歯がゆいところです。当たり前ですが、このプロパティを使う場合は各ブラウザできちんと実機チェックをすることをおすすめします。それぞれの基本的な使い方と注意点解説させていただきました。どれを使えばいいか、意見が分かれるところです。使い、工数に余裕がある案件でFlexboxを使用していますかね。最後まで読んでいただいた方に便利なサイトを紹介します。autoprefixer.github.io使い方はいたって簡単です。リンクにアクセスし、左入力エリア(スマホは上)にソースコードを貼り付けます。自動でベンダプレフィックスの記述付きのコードを右に生成されます。versions」と書くと最新ブラウザから2バージョン前のブラウザまで対応させるためのベンダプレフィックスコードを生成してくれます。よかったら使ってみてください。mapを埋め込んでみようこんにちは、かなきち(@kanakichi0801)です。前回の続きで、今...2019-12-05コーディング練習(3)特殊文字を使いメニュー表を実装しよう!こんにちは、かなきち(@kanakichi0801)です。li)の使い方こんにちは、かなきち(@kanakichi0801)です。かなきちスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。