2020.12.25実践で身に付ける身に付けるhtml+cssの後編として、cssの書き方について紹介します。html編はこちらのページから参照ください。新しい技術を身に付けるには、実例と共に動作を確認しイメージを掴みつつ、実践していくのが効率的です。具体的なレイアウトを設定する:プロパティレイアウト作成:角が丸い枠で要素を囲うレイアウト作成:枠の中のレイアウトを調整するcssファイルの全文オススメの学習サイト終わりにゴールイメージ今回のゴールはhtmlファイルに対してcssを適用し、「お問い合わせフォーム」を完成させることです。html編でも用いた「お問い合わせフォーム」を例に、Webページのレイアウトを作成していきます。htmlのみだととても簡素なページにしかならないですが、cssを組み合わせることで、見栄えが良く、使いやすいWebページになります。cssを作成しWebページのレイアウトを整えるそれではcssを作成し、Webページのレイアウトを整えていきます。htmlファイルは下に記載するファイルを使用します。headタグには画面には表示したくないけど、指定したい情報を入力します。具体的には、cssファイルへのリンク、文字コード、ページのタイトルなどを記載します。bodyタグは画面に表示したい内容(文字、画像、入力フォームなど)を記載します。</body></html>このhtmlの作り方はこちらの記事で作成していますので、まだ読まれていない方はこちらのリンクからどうぞ。新しい技術を身に付けるには、実例と共に動作を確認しイメージを掴みつつ、実践していくのが効率的です。私も実践を重ねながら...note-tech.com2020.12.25スタイルをhtmlに適用する:セレクタースタイルをhtmlに適用するには、スタイルを適用する場所を指定する必要があります。文字サイズするために変更する文字を指定する感じです。このように、htmlに対してスタイルを適用する場所を指定するものをセレクターと呼びます。<h1>タグにスタイルを指定するには次のようにします。*/}このタグ名を指定するセレクターを要素セレクターと呼びます。セレクターにはいくつか種類がありますので、ここでは頻出のセレクターを紹介します。以下の表には結合子という単語が出てきますが、結合子とはセレクターを組み合わせてスタイルを適用する場所を指定するものです。htmlタグに対するセレクター。htmlタグ名をそのまま記載することで指定する。全てを対象としたセレクター。要素の下にある要素を指定。(直下である必要はない)半角スペース区切りで指定する。要素の直下にある要素を指定。セレクターを結合する。DodgerBlue;}セレクターの詳細についてもっと知りたい方は、こちらのサイトを参照ください。具体的なレイアウトを設定する:プロパティレイアウトを設定するためにセレクターの内部に記載する情報をプロパティと呼びます。「お問い合わせフォーム」では各要素が角が丸まった枠で囲まれていますので、プロパティを設定し実現していきます。レイアウト作成:角が丸い枠で要素を囲うここでは、<h1>タグの「お問い合わせ」を例としてcssを作成し、スタイルを整えていきます。このレイアウトにするには次の1〜5のスタイルを適用する必要があります。この1〜5のスタイルを記載したのが以下のcssファイルです。22px;}それでは各プロパティの使い方について見ていきましょう。要素の境界を設定します。要素の境界の角を丸めます。境界上部の太さを設定します。境界上部の色を設定します。背景の色を設定します。[カラーコード]※カラーコードの指定方法は赤、緑、青の値を指定するrgb(0,0,0)記法や、16進数で指定する方法する#000記法がよく使われます。要素の外側の余白を設定します。[余白の大きさ]※余白の大きさを”auto”で指定することで、ブラウザが適切な大きさに設定してくれます。中央揃えする際に便利です。要素の内側の余白を設定します。24px;この中で工夫を行なっているのが、3の枠上面の色設定になります。これは、枠上部の太さを変更(border-top-width)した後に、枠上部の色を変更(border-top-color)することで実現しています。ここまでで「お問い合わせフォーム」を作成するために必要なcssプロパティは概ね網羅されました。最後に細かいレイアウトの調整を行なって完成です。レイアウト作成:枠の中のレイアウトを調整するここまでの説明を応用することで、「お問い合わせフォーム」のレイアウトはほぼ作成できます。残りは枠の中身のレイアウトを調整するのみです。それでは作成していきましょう。入力ラベルと入力フォームが同じ行に表示されているので、改行するプロパティを追加します。入力欄が枠の幅全体に広がっているので、幅を調整します。このレイアウトを実現するプロパティは次の通りです。ここでは、ブロック要素とするために使用しており、その場合要素の前後に改行が挿入されます。要素の幅を設定します。幅の指定はpx、%、auto(自動)など複数あります。50%cssファイルの全文ここまで紹介した内容で「お問合せフォーム」のレイアウトを作成することができます。作成したcssファイルは次の通りです。rgba(0,0,0,0.4);}html編で紹介したhtmlファイルと、今回作成したcssファイルを用いることで、今回のゴールである「お問合せフォーム」を表示することができます。Webプログラミング入門講座がオススメです。私もこの講座を受講してゼロからhtml+cssを学びましたが、説明が分かりやすく短時間で基本的な内容を抑えることができます。bootstrap(cssフレームワーク)やjavascriptの使い方も解説されているので、そのあたりの記事も今後作成していきます。終わりに2回に渡ってhtml+cssの基本的な書き方を紹介してきました。これからはより複雑なWebページの作り方や、サーバーサイドと連携したサイトの作り方も紹介していきたいと思います。cv2.findContoursOpenCVを用いて輪郭を取得する方法を紹介します。参照/変更、パスの検索、ファイル操作pathlibはPython3.4で標準搭載された、Pythonでファイルやディレクトリのパスを参...OpenCV【OpenCV】直線/白線を検出する方法【自動運転】OpenCVを用いた直線を検出する方法を紹介します。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。ホームTECHNOLOGYプロフィールゆうた本業はIT企業でデータサイエンスをしています。.メニューTOPTECHNOLOGYBUSINESSBLOGお問い合わせホーム検索トップサイドバープロフィールゆうた本業はIT企業でデータサイエンスをしています。最近のコメントタイトルとURLをコピーしました。