searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

カテゴリーのご意見・ご要望はこちら
cancel
プロフィール
PROFILE

33歳主婦さんのプロフィール

住所
未設定
出身
未設定

自由文未設定

ブログタイトル
33歳主婦プログラマーを目指す
ブログURL
https://syufu33.hateblo.jp/
ブログ紹介文
33歳主婦がプログラマーを目指してあれこれ奮闘する日記です
更新頻度(1年)

50回 / 365日(平均1.0回/週)

ブログ村参加:2020/03/03

本日のランキング(IN)
フォロー

ブログリーダー」を活用して、33歳主婦さんをフォローしませんか?

ハンドル名
33歳主婦さん
ブログタイトル
33歳主婦プログラマーを目指す
更新頻度
50回 / 365日(平均1.0回/週)
フォロー
33歳主婦プログラマーを目指す

33歳主婦さんの新着記事

1件〜30件

  • FlexBoxについて勉強する

    本日の教材動画はこちら Flexboxについて理解する 前回floatの理解が難しいってつぶやいてた私ですが、どうやら最近はfloatの代わりに今回勉強する「flexbox」を利用してレイアウトを組むことが多いらしい。というわけで、今回はflexboxについて勉強しました。 manablog.org ロードマック通りに勉強すると 、最初に貼り付けた動画でflexboxを勉強する形になるのですが… 丁度図書館で予約してたこちらの本に目を通していたところ、こちらのほうが100倍詳しくflexboxについて教えてくれていました。丁度いい時に借りられてよかった…。ので、今回は上記の本を読んでflexb…

  • レスポンシブデザインのサイトを作成する

    本日の教材動画はこちら 今までいろいろと勉強しながら実際にコードを書いてましたが、最後に「実際にレスポンシブデザインのサイトを作る」とはどういうことなのか、上記の教材動画を見ながら作ってみました。 見よう見まねで作ろうとしてもうまくいかず… 勉強はしてきた者の今までCSSでサイトデザインしたことないし、どう組み合わせていいかもまったくイメージできていなかったので最初かなり苦戦しました…。作者さんがページのソースを配ってくれてたので最初それを見ながら作ってたのですがどうしてもうまくいかず…。 自分がわかりやすいようクラス名などを変えてたので、見本とどこが違うのかの見比べてもいまいち容量がつかめな…

  • floatで見た目を整える

    本日の教材動画はこちら floatで見た目を整える 以前にfloatで文字や画像の回り込み方法を勉強しましたが、今回はレスポンシブデザインでのfloatについて少し見ていきましょう。floatについて忘れた場合は下記記事で復習。 syufu33.hateblo.jp 回り込みの指定と解除について理解する まず今回はfloatを使って下記の様にコンテンツを左右に並べたとします。ページソースはh1とdivタグにクラスをつけたのみのシンプルなものです。 外部CSSファイルの中身とその表示 左右に分けたいので、それぞれのコンテンツにfloatを指定しました。これでご覧の様に左右に分かれて表示してくれる…

  • 段組みの切り替えについて

    本日の教材動画はこちら 段組の切り替えについて考える 今回は段組の切り替えについてみていきます。段組みってなんぞ?段落じゃなくて?って最初思いましたが、「段=カラム」ってのをみてなんとなく理解。ブログなどを作ってる人なら「1カラム」「2カラム」といえばイメージが付きやすいかもしれませんね。カラム=縦方向に並んだブロックのことです(正確には縦だけじゃないと思いますが) 段組を理解できると、誰にでも見やすいレスポンシブデザインのサイトが作れるようになります。実際に見てみるとわかりますが、かなりのサイトで多用されている手法なようです。 2段を1段にしてみる ではまず2段を1段にしてみましょう。例えば…

  • 切り替えポイントについて

    本日の教材動画はこちら 切り替えポイントについて 切り替えポイントとは「ブレークポイント」と呼ばれるもので、CSSの切り替えのきっかけとなるタイミングのことを指します。 メディアクエリなら、@media (メディアタイプ) and ( (メディア特性) ){ CSSの記述 }で書くことになるわけですが、主にメディア特性部分がブレークポイントになるようです。 例えば、@medelia screen and (min-width:480px){セレクタ{background-color:red;}}と記述した場合、480px以上の場合背景を赤色にするとなります。それ以下の場合ここのCSSは適応され…

  • レスポンシブデザインの考え方について

    本日の教材動画はこちら レスポンシブとは 今まで散々レスポンシブ言ってきましたが、ここで初心(?)に戻ってそもそもレスポンシブとはなんぞや?を習っていきたいと思います。 まず response とは反応・返信を意味します。これをWEB上で捉えた場合は「反応が発生することによって見た目が変わる」=レスポンシブデザインのことを指します。反応=閲覧などと考えると手っ取り早いかもしれませんね! レスポンシブデザインとは ではレスポンシブデザインとは何か。それは「1つのファイルを何らかの形で様々な表示形態に合わせることができるデザイン」のことです。HTMLページは1つですが、見る人によってデザインを合わ…

  • ページの印刷設定の仕方について

    本日の教材動画はこちら 今日は印刷設定について見ていきたいと思います。 今回動画が文字だけの説明でまったく状況がイメージできず、何がなんだかさっぱりだったので、自分なりにページを作って勉強&検証してみました。あとで見返してもわかるよう画像が多めです。そのため無駄に縦に長いですがご勘弁を! 印刷設定をする際に使うべき単位 まずモニターの場合は解像度によって文字の大きさや画像の縮尺がかわってきます。印刷って基本画面をそのまま印刷しますので、場合によっては文字が小さすぎたり、画像が大きすぎたりでイメージ通りに印刷できないことがあります。それを避けるために、印刷設定時に使う数の単位は cm / mm …

  • スマホと高解像度ディスプレイに合わせた指定

    本日の教材動画はこちら 今回はスマートフォンや、高解像度ディスプレイにどう画面表示を合わせるかを勉強していきましょう。 スマートフォンの「フィット」機能に対応する スマホはPC向けのWEBページも見ることができるようになってます。これはブラウザが画面の解像度を、ページの表示に合わせる「フィット機能」が搭載されているからです。おかげで私たちはPC用のページを綺麗に見ることができますが、このフィット機能が作動すると、折角用意したメディアクエリが正しく反映されないことがあります。 フィット機能への対策 次のmetaタグをhead内に組み込んであげることで対策することができます→<meta name=…

  • メディア特性とは

    本日の教材動画はこちら メディア特性について メディアクエリにはメディア特性を付け加えることができます。できますっていうかレスポンシブサイトを目指すなら必須の設定のようです。これも種類が多岐にわたりますが、ひとまずよく使う記述を見てみましょう width … 表示領域の横幅 height … 表示領域の高さ max-width … 表示領域の横幅(この後の指定が適応される最大値) min-width … 表示領域の横幅(この後の指定が適応される最小値) device-width … デバイスの横幅 device-heigh … デバイスの縦幅 orientation … デバイスの向き(スマホ…

  • メディアタイプとは

    本日の教材動画はこちら メディアタイプとは メディアタイプとは、メディアクエリを指定する際に「どんなデバイスであるか」を指定するのに使います。合計10種類あるようですが、よく使う基本的なものだけ見てみましょう。 all … すべてのメディア screen … 一般的なディスプレイ全般(パソコンのスクリーン) projection … プロジェクター print … 印刷 記載方法について htmlに直接書き込む場合は<link rel="stylesheet" type="text/css" media="(メディアタイプを記載)" href="xxx.css">という風に。外部CSSに書き込…

  • メディアクエリとは

    本日の教材動画はこちら 今回からなにやら新しい単語いついて勉強していきます。 メディアクエリとは メディアクエリとは、CSSを利用して各種デバイスに合わせた表示・出力方法を指定することができるものです。デバイスの種類や表示解像度などをもとに、随時適切なものを自動的に選択してくれるものになります。 メディアクエリ=レスポンシブサイトの基本!って感じでしょうかね?次にこのメディアクエリを指定していく方法をみていきましょう。 htmlで指定する <link rel="stylsheet" href="xxxx.css" media="(ここにメディアクエリを記述)"> という方法で指定ができます。た…

  • CSSで文字に影をつける

    本日の教材動画はこちら 今回はCSSで文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていきましょう。 text-shadow で文字に影をつける 使い方は至ってシンプルで text-shadow{横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定;}です。実際に使ってみたほうが早いので早速見ていきましょう。 ソース内容と表示 上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。 CSSで影をつける …

  • 空白と大文字小文字の指定した文字装飾

    本日の教材動画はこちら 今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。 text-indet で空白を指定する text-indetを使うと、1行目のインデント(字下げ)を指定することができます。使い方は text-indet:数値(5emなど);となります。 text-transform で大文字・小文字をコントロールする text-transformを使えば、以下の様に大文字・小文字のコントロールをすることができます。 normal … 通常 capitalize … 単語の先頭文字を大文字にする lowercase … すべて小文字で表示する uppercase…

  • CSSを使った文字の線装飾

    本日の教材動画はこちら 今まで様々な文字装飾をみてきましたが、ここで更にレパートリーを増やします。 text-decoration で文字に線を引く 文字装飾の定番(?)といえば、太線にする、色を変える、そして線を引くです!!今回は文字を線で装飾していく方法を見ていきましょう。線装飾には下記の4種類があります。 none … 何もつけない underline … 下線をつける overline … 上線をつける line-through … 打ち消し線をつける 使い方としては〇〇{text-decoration:線の種類;}です。noneはいつ使うんだ?って感じですが、これは主にaタグにつける…

  • セレクタのまとめ

    本日の教材動画はこちら 今まで習ったセレクタのまとめ 本日は今までに習ったセレクタのまとめ動画でした。というわけで私も今まで勉強してきて、メモしてきた記事のリンクを動画の内容に沿って貼っていこうかと思います。 ・セレクタの種類と書き方について ・CSSをまとめて指定する方法 ・特殊なセレクタの記述方法について ・擬似要素について ・構造的な擬似要素について ・nth-childとnth-last-childの使い方について ・nth-of-typeとonly-of-typeについて ・直前や直後を示す擬似要素について これ以外にたくさんあり、特に擬似要素については記事にしただけでも上記より多い…

  • 直前や直後を示す擬似要素について

    本日の教材動画はこちら before と after について before は直前、after は直後を示す擬似要素です。使い方は〇〇::before(又はafter){content:”表示させたい内容”;}となります。前回同様今回もダブルコロンなので注意。一応コロン1こでもいけるようです。(どうも:はCSS2、::はCSS3対応みたいです) もちろん文字以外にもスタイルの適応も可能。その場合はcontent:”内容”;の後ろにいつも通りCSSを追加していけばOKです。内容は文字だけでなく画像も指定可能。 その場合はcontent:url(アドレス); となります。文字挿入せず何かしらのス…

  • 1つ目を示す擬似要素について

    本日の教材動画はこちら firs-letter と first-line について first-letter は1つ目の文字、firs-line は1つ目の行を示す擬似要素です。今までは「1つ目の要素」という形で全部をひっくるめていましたが、今回はピンポイントという形で指定できます。 使い方はシンプルですが、唯一注意点があるとすれば記述の仕方が セレクタ:要素名{値;}ではなく、セレクタ::要素名{値;}となる点です。コロンが1個ではなく2個なので注意しましょう。ただ調べてみると:だけでも記載してたりするので、どっちが正しいのかは正直不明です。誰か教えて。 それでは早速使ってみます。今回用意し…

  • UIに関わる擬似要素について

    本日の教材動画はこちら enabled disabled checked について 今回はまとめて3つの要素を見ていきます。まずそれぞれの定義は以下の通り enabled : 通常の状態(選択・入力できる状態)のinput系要素 disabled : "disabled"オプション(選択・入力ができない)の指定されたinput系要素 checked : 主にradio,checkboxなどで選択されたものを対象とする これだけでは何が何だかさっぱりなので、実際に記述していきながら動作をみてみましょう。 用意したHTMLとCSSがこちら。 ページソースと外部CSSの内容 上記で出来上がるページが…

  • nth-of-typeとonly-of-typeについて

    前回はnth-chileを勉強しましたが、今回はそれと似たnth-of-typeとonly-of-typeを勉強していきます。 本日の教材動画はこちら nth-of-type と only-of-type について nth-pf-typeは「特定の親要素の中の”特定の子要素が対象”」となります。nth-childの時は「特定の親要素の中の”隣接する子要素が対象”」でしたので、少しだけ違うことが分かるかと思います。 次にonly-of-typeは「特定の親要素の中の”唯一の子要素が対象”」となります。子要素が一つのみの場合に適用されます。 言葉だけでは分かりにくいので、実際に書いて違いを見ていき…

  • nth-childとnth-last-childの使い方について

    チャートが「7.レスポンシブサイトを作ってみよう【英語】」に突入したのでいよいよ下手くそながらもサイトを作り始めるのか?と思ってたのですがそんなことありませんでした。引き続きCSSの勉強が続くみたいなので今日も元気にやっていきましょう。 本日の教材動画はこちら 今回は「何個目」かを指定できる擬似的な要素について勉強していきます。 nth-child と nth-last-child について nth-childは「最初から何番目の」を指定することができます。last-childは逆に「最後から何番目の」を指定することができます。使い方は「要素:nth-child(値){スタイルの内容}で記載し…

  • 開発者ツールの使い方について

    前回から大分時間が空いちゃいましたね。年末はあれこれしてると時間が経つのがあっという間ですね!今まで下記のチャートに沿ってHTMLとCSSを勉強してきたわけですが、今日は次のステップである「開発者ツール」についてまとめていきたいと思います。 manablog.org 開発者ツールでできること Googole Chromeには「開発者ツール」と呼ばれるものがあります。chromeをブラウザ用途だけて使っている場合はあまり馴染みがない言葉ですね!私もそうです。そんなchromeの開発者ツールとやらを使うと何ができるかというと ページのHTML(ソース)が見れる ページのCSS設定がどうなっているか…

  • CSS 勉強まとめ

    さてさて、CSSを勉強し始めて4か月。のろのろながらも教材の全動画を勉強し終えたました。HTMLの時同様遅すぎでは???という感が否めませんが、途中でやめずコツコツ続けてるだけいいとしよう! 今まで勉強してきたことを記事にまとめてきたわけですが、1回で物になったとは思っていないので、今後の(自分の)見直し用に下記に簡易リンクを設置しておきます。 CSS 勉強まとめ 基礎編 CSSとは? CSSの書き方について 直接CSSを書き込む方法 styleタグによるスタイル適応の仕方 外部ファイルによるスタイル適応について セレクタ編 ブロック要素とインライン要素について セレクタの種類と書き方について…

  • 影をつける方法について

    本日の教材動画はこちら 今回はボックスに影(ドロップシャドウ)をつける方法です。色々なものにつけれるようですが、基本的な使い方は同じとのこと。 box-shadow の使い方について ボックスに影をつけるには box-shadow プロパティを使います。6つの値があります。 水平方向の影のオフセット値(必須) 垂直方向の影のオフセット値(必須) ぼかしの距離(強さ) 広がりの距離 影の色 insetの有無(内側の影にするか) では順番に見ていきましょう。 水平と垂直方向の影を指定する まずこの2つはセットです。水平だけ、垂直だけ指定しても影はできませんので注意。使い方としては box-shad…

  • 角丸プロパティのあれこれについて

    本日の教材動画はこちら 今回は引き続きボーダー関連について。前回はボーダー線のあれこれでしたが、今回はボーダーの角についてお勉強していきます。 border-radius について ボックスには必ず左上、右上、右下、左下と四隅がありますよね。border-radiusはその四隅のコーナー部分をどうするかを指定できるプロパティになります。何もしなければただの四角形のボックスになりますが、手を加えることで角丸にしたり、円形にしたりなどできます。 それぞれ指定したり、一括指定できたりするのですが、文字で説明するより実際に見てもらったほうが早いので早速書きながら見ていきましょう。 ページソースと外部C…

  • borderプロパティについて

    本日の教材動画はこちら 今回はちょくちょく利用してきたborderについて掘り下げてみていきましょう。今までは黒色の実線を使う事が多かったかと思いますが、borderプロパティでより細かく姿勢ができるようです。 border について そもそもボーダーの範囲ってどこぞ?って思いますが、「ボックスの外側の線」「マージンの内側であり、パティングの外側」という範囲のようです。前回で勉強したbackground-clipを参照するとちょっとわかりやすいかもですね。では順番でborderの細かいプロパティを見ていきましょう。 border-style ボーダーの種類を決める border-styleでは…

  • 背景のサイズと適応範囲について

    本日の教材動画はこちら 引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。今回は背景のサイズ指定についてと、背景の適応範囲について勉強していきましょう。 background-size で指定できる値について background-sizeは文字通り背景の大きさを指定できるプロパティです。指定できる値は以下の5つです。 auto → 自動的に大きさを調節(初期値) contain → 縦横比を保持したまま、背景領域に収まる最大サイズになるよう拡大縮小する cover → 縦横比は保持したまま、背景領域を完全に覆う最小サイズになるよう拡大縮小する 値指定 → 〇pxという形で、…

  • 背景の繰り返し・表示位置・固定表示の指定について

    本日の教材動画はこちら 前回に引き続き、背景指定のあれこれについて深く掘り下げて勉強していきます。動画の後半が死ぬほど説明不足だったため、実践される人は一旦最後まで読んでいただけるとわかりやすいかと思います。 背景の繰り返し設定について 前回一瞬だけ触れた背景画像の繰り返し設定のプロパティについて、より詳細に見ていきましょう。まず背景の繰り返し設定は background-repeat プロパティを使用します。設定できる値は下記の4つ。 no-repeat → 繰り返さない repeat → 縦横に繰り返す repeat-x → 横に繰り返す repeat-y → 縦に繰り返す 実際に使ってみ…

  • 背景指定の基本について

    本日の教材動画はこちら いままで当たり前のように使ってましたが、今回は背景の指定について深く掘り下げて勉強していきます。 背景の指定方法のあれこれ 背景プロパティには色々な指定をかけることができます。下記に代表的なものをいくつか記載しました。残りは参照サイトをみてみてくださいませ。 background … 背景の指定をまとめて行う場合に使う。ショートハンド。 background-color … 背景の色を指定する(※1) background-image … 背景の画像を指定する(※2) background-size … 背景の大きさを指定する ※1 色は「色名」「10進数」「16進数」…

  • z-indexプロパティについて

    本日の教材動画はこちら 前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。 z-indexについて z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありましたよね。基本後ろに記述したものが前に来るのですが、z-indexではその前後関係を変える際に使用します。指定は数字でし、数字が大きくなるほど配置物は手前(上側)にきます。 文字だけだとさっぱりなので、実際に書きながらみていきましょう。z-indexはpositionプロパティにstatic以外の値が指定されている要素に適…

  • positionプロパティについて

    本日の教材動画はこちら 本日もボックスの配置に関係するpositionについてみていきます。今回も動画を見てもいまいち理解に苦しんでしまったので自分で調べたながら書いてます。もし理解などが間違ってたら是非ご指摘ください...。 position プロパティについて 主に要素の位置を決める基準を指定するためのプロパティ。文字だけでは分かりづらいので後ほどの記述画像で確認したほうが早いかも。使える値は static → 配置方法を決めない。初期値。 abusolute → 絶対位置への配置する(※1) relative → 相対位置へ配置する(※2) fixed → 絶対位置へ配置し、スクロールし…

カテゴリー一覧
商用