ののの

ののの

Flexboxについて知ろう

FlexboxとはFlexbox（Flexible Box Layout）は、CSSのレイアウト方法の一つで、要素を自由に並べたり、親要素の幅に合わせて調整したりするための機能です。従来の「float」や「inline-block」に比べ、柔軟かつ簡単にレイアウトを調整でき、特にレスポンシブデザインに役立ちます。 Flexboxを使うことで、並びの方向や折り返し、配置方法などを詳細に指定することができます。 要素を横並びにするdisplay: flex 「display

ののの

    • 10日目　レスポンシブデザイン

      レスポンシブデザインは、ウェブサイトやアプリが、使用されるデバイスや画面サイズに応じてレイアウトを最適化する技術です。これにより、ユーザーはスマートフォン、タブレット、パソコンなど、さまざまなデバイスで快適にコンテンツを閲覧できるようになります。具体的には、以下のポイントが重要です。 1. viewportの設定 レスポンシブデザインを適用する準備として、<head>タグ内に<meta name="viewport">を設定します。これにより、スマートフォンやタブレットな

      ののの

      • メディアクエリについて

        メディアクエリ（Media Queries）とは、ブラウザの画面サイズに応じてCSSのスタイルで設定できる手法のこと。 メディアクエリの書き方 メディアクエリは、@media(条件)｛･･･｝というように書く。（以下参照） 指定された条件が当てはまるときにのみ｛｝内のCSSが適応される。 @ media (max-width: 1000px ){ /*1000px以下の時に適応したいCSSを記述*/｝ メディアクエリの条件 メディアクエリの条件には、max-wid

        ののの

        • 8日目 ボタンの作成part2

          立体的なボタンの作り方box-shadowプロパディ ボックスに影をつけるために用いる。 「影の位置」と「影の色」を指定する。 box-shadow: 水平方向(px)  垂直方向(px)  色 :active セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適応することができる。 「box-shadow：none；」とすると、影を消すことができる。 position：relative 要素の位置を変更するためにも使うことが出来ます。

          ののの

        Flexboxについて知ろう

        ののの

          7日目　ボタンの作成

          ボタンは＜a＞タグで指定します。 しかし、＜a＞タグはインライン要素であり、インライン要素にはwidthやheightを指定することができません インライン要素（<a>タグなど） widthやheightを指定することができない。 marginやpaddingは左右のみ指定できる。 配置は横並び インラインブロック要素 ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。 widthやheight、marginやpadding

          ののの

          7日目　ボタンの作成

          ののの

          6日目　class名ってどう決めるの？

          HTML・CSSについて勉強していく中で、 「class名ってどうやって決める？」 「どんなclass名がわかりやすい？読みやすい？」 という疑問がでました。 そこで、今回はclass名の決め方について詳しく調べ、まとめようと思います。 classとは？classとは、HTMLに対してCSSを適応させるための記述です。 HTMLにCSSを適応させ、デザイン性をアップさせるために、classを記述する必要があります。 classの書き方は？HTMLのclassの書き方

          ののの

          6日目　class名ってどう決めるの？

          ののの

          5日目　フッターについて

          フッターのレイアウトについて フッターのロゴとリストについて、ロゴはフッターの左、リストは右に配置されています。 float: right;・・・指定した要素を右から順に横並びにする float: left; とfloat: right; を組み合わせることで、ロゴとリスト全体を左右に配置することができる。 そのため、左に配置したいもの（header-logo）には「float: left;」を、右に配置したいもの（header-list）には「float: right

          ののの

          5日目　フッターについて

          ののの

          4日目　ヘッダーのレイアウト

          ヘッダーの中身を横並びにする HTMLで記述した要素は基本的に縦に並んでいくので、横並びにするにはCSSが必要です。 floatプロパディ･･･指定した要素を横並びにできる。 HTML CSS<ul> li{ <li>HTML</li> list-style:none; <li>CSS</li>

          ののの

          4日目　ヘッダーのレイアウト

          ののの

          3日目　簡単なwebページを作ってみよう！

          全体構造<html>要素の中に<head>要素と<body>要素が必要です。<head>要素にはページに関する情報、<body>要素には実際に表示したい内容を書きます。 head要素 ①文字コードの指定　<meta charset = "utf-8">　文字化けを防ぐ。 ②ページのタイトル　<title> HTML </title>　タイトルはタブ上に表示。 ③CSSの読み込み　<link rel="stylesheet" href="stylesheet.css"> 　

          ののの

          3日目　簡単なwebページを作ってみよう！

          ののの

          2日目　CSSに触れる

          CSSとは？CSSとは、HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語です。 CSSを用いることで、Webサイトのレイアウトを整えることができます。 基本の書き方HTMLで用意した要素に対して、 「どこの」「なにを」「どうするか」の順番で書きます。 例：「h1要素の」「color（色）を」「red（赤）」にする場合、 　　→h1（どこの）｛ 　　　　color（なにを(プロパディ)）: red（どうする） ;            

          ののの

          2日目　CSSに触れる

          ののの

          1日目　HTMLに触れてみよう！！

          HTMLとCSS Webページは「HTML」と「CSS」という言語を組み合わせて作られている。 まずは、HTMLから勉強していきます。 HTMLテキスト <>（タグ）と呼ばれる印をテキストにつける <h1> HTMLに触れる </h1>　h1(見出し） <h1>以外にも、<h2>, <h3>・・・<h6>がある。（hは「heading」見出しの略） <p>HTMLとCSS</>　p(段落) 段落を表すのは、<p>要素です。（pは「paragraph」段落の略） ＊

          ののの

          1日目　HTMLに触れてみよう！！

          ののの

          【自己紹介】はじめまして。

          はじめまして！ のののと申します。 まずは、はじめましてのご挨拶と自己紹介を投稿しようと思います。 自己紹介福井県出身　石川県在住の大学院2年生です。 大学・大学院では医療系について学んできましたが、来年度からIT企業に就職予定です。 気軽に情報をシェアしていけたらと思いますので、どうぞよろしくお願いします！」 趣味最近は、筋トレや読書にとくにはまっています。 来年までに、シャツがパンパンになるくらい腕を太くしたいです笑 ブログを始めた理由とこれからブログを始めた理

          ののの

          【自己紹介】はじめまして。

          ののの