会員登録後、有料プランで広告を非表示に
詳しくはこちら
本日の教材動画はこちら Flexboxについて理解する 前回floatの理解が難しいってつぶやいてた私ですが、どうやら最近はfloatの代わりに今回勉強する「flexbox」を利用してレイアウトを組むことが多いらしい。というわけで、今回はflexboxについて勉強しました。 manablog.org ロードマック通りに勉強すると 、最初に貼り付けた動画でflexboxを勉強する形になるのですが… 丁度図書館で予約してたこちらの本に目を通していたところ、こちらのほうが100倍詳しくflexboxについて教えてくれていました。丁度いい時に借りられてよかった…。ので、今回は上記の本を読んでflexb…
本日の教材動画はこちら 今までいろいろと勉強しながら実際にコードを書いてましたが、最後に「実際にレスポンシブデザインのサイトを作る」とはどういうことなのか、上記の教材動画を見ながら作ってみました。 見よう見まねで作ろうとしてもうまくいかず… 勉強はしてきた者の今までCSSでサイトデザインしたことないし、どう組み合わせていいかもまったくイメージできていなかったので最初かなり苦戦しました…。作者さんがページのソースを配ってくれてたので最初それを見ながら作ってたのですがどうしてもうまくいかず…。 自分がわかりやすいようクラス名などを変えてたので、見本とどこが違うのかの見比べてもいまいち容量がつかめな…
本日の教材動画はこちら 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で文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていきましょう。 text-shadow で文字に影をつける 使い方は至ってシンプルで text-shadow｛横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定；｝です。実際に使ってみたほうが早いので早速見ていきましょう。 ソース内容と表示 上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。 CSSで影をつける …
本日の教材動画はこちら 今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。 text-indet で空白を指定する text-indetを使うと、1行目のインデント（字下げ）を指定することができます。使い方は text-indet：数値（5emなど）；となります。 text-transform で大文字・小文字をコントロールする text-transformを使えば、以下の様に大文字・小文字のコントロールをすることができます。 normal … 通常 capitalize … 単語の先頭文字を大文字にする lowercase … すべて小文字で表示する uppercase…
本日の教材動画はこちら 今まで様々な文字装飾をみてきましたが、ここで更にレパートリーを増やします。 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(アドレス)； となります。文字挿入せず何かしらのス…
本日の教材動画はこちら firs-letter と first-line について first-letter は1つ目の文字、firs-line は1つ目の行を示す擬似要素です。今までは「1つ目の要素」という形で全部をひっくるめていましたが、今回はピンポイントという形で指定できます。 使い方はシンプルですが、唯一注意点があるとすれば記述の仕方が セレクタ：要素名｛値；｝ではなく、セレクタ：：要素名｛値；｝となる点です。コロンが1個ではなく2個なので注意しましょう。ただ調べてみると：だけでも記載してたりするので、どっちが正しいのかは正直不明です。誰か教えて。 それでは早速使ってみます。今回用意し…
本日の教材動画はこちら enabled disabled checked について 今回はまとめて3つの要素を見ていきます。まずそれぞれの定義は以下の通り enabled ： 通常の状態（選択・入力できる状態）のinput系要素 disabled ： "disabled"オプション（選択・入力ができない）の指定されたinput系要素 checked ： 主にradio,checkboxなどで選択されたものを対象とする これだけでは何が何だかさっぱりなので、実際に記述していきながら動作をみてみましょう。 用意したHTMLとCSSがこちら。 ページソースと外部CSSの内容 上記で出来上がるページが…
前回は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を勉強し始めて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 について そもそもボーダーの範囲ってどこぞ？って思いますが、「ボックスの外側の線」「マージンの内側であり、パティングの外側」という範囲のようです。前回で勉強した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進数」…
本日の教材動画はこちら 前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。 z-indexについて z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありましたよね。基本後ろに記述したものが前に来るのですが、z-indexではその前後関係を変える際に使用します。指定は数字でし、数字が大きくなるほど配置物は手前（上側）にきます。 文字だけだとさっぱりなので、実際に書きながらみていきましょう。z-indexはpositionプロパティにstatic以外の値が指定されている要素に適…
本日の教材動画はこちら 本日もボックスの配置に関係するpositionについてみていきます。今回も動画を見てもいまいち理解に苦しんでしまったので自分で調べたながら書いてます。もし理解などが間違ってたら是非ご指摘ください...。 position プロパティについて 主に要素の位置を決める基準を指定するためのプロパティ。文字だけでは分かりづらいので後ほどの記述画像で確認したほうが早いかも。使える値は static → 配置方法を決めない。初期値。 abusolute → 絶対位置への配置する（※1） relative → 相対位置へ配置する（※2） fixed → 絶対位置へ配置し、スクロールし…
本日の教材動画はこちら 本日はボックスの配置に関係するfloatとclearプロパティについて勉強していきます。clearについては動画をみても正直よく理解できなかったので自分で調べたことを書いてます。よしなに。 float プロパティについて float についてですが、これは右や左への回りこみを指定させるためのプロパティになります。言葉では分かりづらいですが、たまに画像の右側に文字が書いてあることありませんか？あのデザインを実現させるためのものになります。（あとで実践しますがそっちを見たほうがわかりやすいかも）指定できる値は下記の3つ left → 指定した要素を左へ回り込ませる。続く内容…
本日の教材動画はこちら 今回はboxサイズの指定について習っていきます。boxというよりはブロック要素ってイメージでもいいのかしらね…？（imgとかにも使えるみたいだから厳密には違うけども） 幅・高さの最小値と最大値の指定の仕方 テキストエリアやdivタグ内など、特に指定がなければ書いた分だけ横長・縦長になりますよね。それだと見るブラウザによっては見た目が崩れてしまったり、レスポンシブデザインを目指したがために逆に見えにくくなってしまう場合があります。（例えばPCの表示横幅を50%にした場合綺麗に見れるが、スマホの横幅50%で見た場合は小さすぎるなど） なので、あらかじめ表示させる範囲の最大値…
本日の教材動画はこちら 今回はdisplayとvisibilityというプロパティを勉強します。あまり聞きなれないのでどんなのかまったく想像がつかない…。 display について display プロパティは、「そのHTML要素をどのように表示するか」を指定する際に利用されるようです。値の種類が多岐にわたるようなので、今回は動画で紹介されてた部分だけみてみましょう。 block → ブロック要素として表示させる inline → インライン要素として表示させる inline-block → インラインで扱えるブロック要素として表示させる（※） none → 表示させない ※ブロック要素にしか…
本日の教材動画はこちら 前回 padiing と margin の違いをかる～～く触れたんですが、普通に次の動画でmarginについてやってました。というわけで今回はmarginの余白についての指定方法です padding 同様4つに分けて指定することができる 指定についてですが、上下左右の合計4か所指定することができます。書き方は margin-〇〇で、〇〇にはtop（上）bottom（下）right（右）left（左）をいれます。ショートハンドのpaddingとまったく同じなので今回は割愛します。 早速実践でどうなるのか見てみましょう。HTMLページは下記を用意しました。paddingの時…
本日の教材動画はこちら padiing ってなんやねん？って話ですが、どうやら「ボックス（ボーダー）の内側に当たる余白を指定」するプロパティのようです。marginとどう違うの？？って話は最後に調べるとして、ひとまずpaddingの使い方をみていきましょう。 padding は4つに分けて指定することができる まず指定についてですが、上下左右の合計4か所指定することができます。書き方は padding-〇〇で、〇〇にはtop（上）bottom（下）right（右）left（左）をいれる。 今回も実践で違いを見てみましょう。HTMLページは下記を用意しました。 ページのソース内容 ブロック要素が…
本日の教材動画はこちら 今日は箇条書きなどによく使われるリストの装飾についてのお勉強です。 リストの表示を変える方法 まずは何もしていない場合のリスト表示を見てみましょう。 ページのソース内容 こちらがソース内容で、表示されるページは下記のようになります。 出来上がったページ 特別何をしたわけでもないので、ulの表示は・、olの表示は1,2,3...となっています。この「・」「123..」の表示部分を変えていく方法を見ていきましょう。 list-style-type で表示を変える 頭の部分を変更するには list-style-type というプロパティを使用します。主に以下の種類があります（…
本日の教材動画はこちら 文字（文章）の配置の仕方について学んでいきます。 text-aling について 文字の配置を指定する場合は「text-aling」というプロパティを使います。値に指定できる種類はいくつかありますが、代表的なのが下記の4つです。 left → 左寄せ right → 右寄せ center → 中央寄せ justify → 両端揃え 注意しなければいけないのは、これらはあくまで「文字配置」の指定方法であり、画像やブロック配置には利用できません。（一部サイトで画像にも利用可の表記を見かけましたが、更新日時が古かったので今回は動画通りに学習します） また、justifyは「ア…
本日の教材動画はこちら 今回はさらなる文字装飾について勉強していきます。 ＜font-style＞について 主に文字を斜体にしたい時に指定します。指定はの3通り。 normal → 通常（初期値） italic → 斜体 oblique → 斜体 inherit → 親要素の指定を継承 斜体についてですが、italicがなければoblique、obliqueがなければitalic文字を表示。指定フォントにそのどちらもなければ、通常文字をブラウザが斜体にして表示させるようです。 ＜font-variant＞について フォントにsmall-caps（スモールキャップ）指定したい場合に利用。スモール…
本日の教材動画はこちら 前回はフォントの指定方法をやりましたので、今回は文字の太さの指定方法についてです。 文字の太さの指定方法 使うのは「font-weight」というプロパティになります。値となる太さの指定方法には下記の2種類があります。 ◆単語で指定する normal → 通常の太さ bold → 太め border → やや太め lighter → やや細め inherit → 親要素の指定を引き継ぐ ◆数字で指定する 100～900の間で指定ができる。100単位で指定することが多い。 同じ太さの指定になる単語と数字 normalの太さ＝400、boldの太さ＝700 と、指定方法は違…
本日の教材動画はこちら 本日はページ表示時に使われるフォントの指定方法についてです。今回も文字だけの記事になりますが座学ってことで！ フォントの指定方法について フォントは「font-famil:"フォント名";」で指定します。場合によっては""が不要になりますので、詳しく見ていきましょう。 指定するフォント名について フォントには大きく分けて「フォントファミリー名」と「総称フォント名」があります。フォントファミリー名は「メイリオ」や「Arial」など、具体的なフォント名のことです。逆に総称フォント名は「ゴシック体」や「明朝体」などの、フォントが属するカテゴリのことを指します。 総称フォントに…
本日の教材動画はこちら 今回も前回の「数値の指定方法」に続き、当たり前に使っていた「色の指定方法」について深く勉強していきたいと思います。 色の指定方法にはいくつかある 1. 色名で指定をする方法 redとかgreenとか、色名を記載して指定する方法です。単純な色味ならこれで十分ですが、「特定の色しか指定できない」というデメリットを併せ持ちます。この特定の色はW3Cという団体が決めており、定められた色以外は使用することができません。 2. RGBで指定する方法 恐らくこれが一番一般的な指定方法ですね！RGBでの指定は2通りあります。 【10進数で記載する場合】 rgb（赤の値，緑の値，青の値）…
本日の教材動画はこちら 今回は数値ではなく単語を使ったCSSのデザイン指定方法についてみていきます。今まで当たり前に使ってきてましたが、今回は底の部分を不可彫りしていきます。 プロパティに対して決まっているもの プロパティってなんだっけ？って一瞬なりますが、CSSの基本書式（セレクタ・プロパティ・値）を思い出すとわかりやすいです。このプロパティ部分に対して決まっている値（単語）があれば使う事ができます。 align → center（中央） / left（左） / right（右） vertical-align → middle（上端揃え） / top （中央揃え）/ bottom（下端揃え）…
本日の教材動画はこちら 今までなんとなく使っていたサイズの指定方法ついて詳しく勉強していきたいと思います。 ＜絶対的なサイズ＞について 絶対的なサイズとは、名前の通り誰がどの端末でみても同じ大きさをたたき出してくれるサイズの指定方法です。種類と読み方、それぞれのサイズ関係は以下となります。 in（インチ） →1icn = 2.54cm = 25.4mm mm（ミリメートル） cm（センチ） pt（ポイント）→72pt = 1inc = 6pc pc（パイカ） →1pc = 12pt ＜相対的なサイズ＞について 相対的なサイズとは、見る端末や指定環境によって大きさが変わるサイズのことです。サイズ…
本日の教材動画はこちら 今回は子要素にかかる動的判別によるセレクタについて勉強しました。これは文字では伝わりづらいため、一先ず概要を書いてから画像でみていきたいと思います。 最初の子要素 最初の子要素に何か指定をかけたい場合、「:firs-child｛～…;｝」で指定をする 最後の子要素 最初の子要素に何か指定をかけたい場合、「:last-child｛～…;｝」で指定をする 唯一の子要素 唯一の子要素に何か指定をかけたい場合、「:only-child｛～…;｝」で指定をする 実際に書いてみました。まず用意したHTMLがこちらです。 HTML内容 次に外部CSSを下記の通り記述してみました 外部…
本日の教材動画はこちら 擬似要素とは、動的に発生する事象を要素としてセレクタに使うためのものらしい。例えばまだ訪問していないリンクや訪問済みのリンク、マウスポインタが乗っている、フォーカス（選択）されているなど、見る側が何かしらアクションを起こせる場所をセレクタとして使える。 擬似要素の書き方と代表例 擬似要素は「：」を書いた後に擬似要素名を書き、うしろはいつも通りどうしたいかを｛ ｝で書く。今回は代表例を4つ紹介しながら書き方を見ていきましょう。 まだ訪問していないリンク（link） 未訪問先のリンクの指定は「a:link」となります。例えば未訪問先のリンクを、文字色を変えて知らせたい場合は…
本日の教材動画はこちら HTMLには「属性」が指定されているものがある。と言っていたが、どれが指定されてるのかよくわからないし今まで当然のようにでてきてた属性ってそもそもなんだってばよ？となって調べてみた。 属性とは、どうやら「要素の何かしらの設定をつけるようなもの」らしい。なんだかふんわりしている。要素とは…？とか調べ出すと概念を把握するとこまで行きそうなためとりあえずそういうものなんだと思うことにして勉強を進めることにしました。 属性セレクタの利用方法について 今までタイプセレクタ、IDセレクタ、classセレクタを使ってCSSのデザインを指定してきました。今回はここに新しく「属性セレクタ…
本日の教材動画はこちら 前回他にも色々細かくまとめられるらしいけど難しくてよくわからん！って言ってたら、今回少し触れることができた。というわけで今回は特殊なセレクタの設定方法をみていきます。 ＜親要素＞と＜子要素＞について理解する セレクタを理解するためには、まずは親要素と子要素について理解しておく必要があるようだ。「親要素」とは外側にある要素で、「子要素」はその内側にある要素。マトリョーシカの一番外側が親要素で、その中に入ってるのが子要素って認識でいいのかな？ちなみに子要素の中は孫要素というらしい。ひ孫とかもいるのかしらね。 ＜特殊なセレクタ＞について 特殊なセレクタの書き方はいくつかあるよ…
本日の教材動画はこちら まとめて指定→同じ設定にしたいということ。同じ設定をするためだけに、何行も同じこと書くのは無駄だよね？ならまとめて書いちゃおう！という考え方です。CSSをまとめて指定する方法は下記の2つがあります。 CSSファイルでまとめる HTMLでclassを指定した後、CSSファイル側でカンマを使ってclassの記述をまとめる方法。具体的な書き方は下記となる。 HTMLでclassを指定し CSS側ではカンマを使って内容をまとめる まとめ方は上記の通り、「.class,」でまとめる。最後のclass行はカンマ不要。まとめたい内容を｛ ｝内に書いた後は、通常通りの記述をする。こうす…
本日の教材動画はこちら CSSを指定するのに必須なセレクタは、大きく分けて3種類あります。今回はそれぞれの特徴と書き方を見ていきましょう。 1. タイプセレクタ HTMLタグのこと。HTMLが記載してあれば、適応させるために新しく一文を書き加える必要などはない。今まで使ってきたCSSがこのタイプですね（ h1{～....} みたいなタイプ） 2. idセレクタ HTML側ではid属性を利用して指定し、CSS側では「＃」を使って選択する。1つのページ中につき一度しか同じ名前は使えないのが特徴。 3. classセレクタ HTML側ではclass属性を利用して指定し、CSS側では「 . 」を使って…
本日の教材動画はこちら CSSを取り扱う際に大事な要素となる、ブロック要素とインライン要素の違いについて勉強していきます。 ＜ブロック要素＞とは ブロック要素とは、その名の通りブロック単位で扱われる要素のこと。pタグやhタグ、tableタグなどがブロック要素となります。簡単な見分け方はタグの前後が改行されるかどうかで判断ができる。 ＜インライン要素＞とは インライン要素はブロック要素とは逆に、文章の一部だけを取り扱う要素のことを指します。aタグやspanタグ、imgがそれに該当し、タグ囲った部分など一部だけが適応されるのが特徴です。 CSSを取り扱う上で把握しておきたい違い ブロック要素はブロ…
本日の教材動画はこちら 今日はいよいよ最後のスタイル適応方法である、「外部ファイルを読み込んでCSSを適応させる」を勉強していきたいと思います！ 外部ファイルからCSSを読み込む方法 CSSファイルを用意し、それをページに読み込ませるにはLinkタグを使います。使い方はheadの中に＜link rel="stylesheet" type="text/css" href="外部ファイル名"＞を記載してあげるだけでOK。外部ファイル名は任意でいいが拡張子は .css となる。 用意する物 外部ファイルを適応するために準備する物は、適応させたいページ（〇〇.html）とスタイルを書き込んだCSSファ…
本日の教材動画はこちら 前回は直接CSSを書き込む方法をみましたが、今回はオーソドックス？なheadにCSSを書いて適応していく方法を勉強。 ＜styleタグ＞によるスタイルの適応方法 styleタグによる適応は、head内にCSSを記載する必要があります。type属性（type="text/css"）の記載が必要で、使い方はhead内に＜style type="text/css"＞〇〇＜/style＞と書き、〇〇内にCSSを記載する形になります。 CSSの記載の仕方について おさらいとなりますが、CSSには①セレクタ（どこの）②プロパティ（何を）③値（どうするか）の指定が必要です。また、プロ…
本日の教材動画はこちら CSSについて勉強した際、CSSの書き方は3種類あることがわかりました。今回はその中の1つ目の方法「（style属性を利用して）直接タグの中にCSSを書く方法についてみていきたいと思います。 ＜style属性＞をタグの中に使う 直接CSSを書き込むには、タグ内にstyle属性を追加する必要があります。使い方は利用したいタグ内に style="CSSの指定" を記載します。 また、下記の理由でhead内に一言CSSを使いますよ！という一文を記載したほうがいいようです。 文書内で使用されるスタイルシートがCSSによるものであることをブラウザなどに知らせるために、 <head…
本日の教材動画はこちら 前回はCSSの概要的なものを確認しましたが、今回はもう少し突っ込んだCSSの書き方についてみていきたいと思います。 ＜CSSの適用・優先順位＞について HTMLは書いた箇所に書いた通り適応されましたが、CSSは基本別ヵ所（headや外部ファイル）に書くことになるため、どれを適応・優先するのか決まりがあります。 ・書いた順番によって優先される CSSは基本「あとに書いたものが優先」されます。つまり同じような指定を何回も書いていた場合は最後に書いたものが優先されます。 例えば、外部CSSファイルでの指定は「文字色：赤」、style要素で文章単位の指定を「黄色」、style属…
本日の教材動画はこちら ついにCSSのお勉強に突入です。今回はCSSとはなんぞや？という概念的なものからみていきましょう。 ＜CSSの役割＞について HTMLでページの構造（ここに文字、ここで改行して、リンクはこれで...などなど）を決めるために書いていましたが、CSSはページの見た目を決めるために書かれます。つまりページのデザイン性を高めるために書くものですね！ ＜CSSの構造＞について CSSは「1.どこの」「2.何を」「3.どうするか」 という3点セットの情報で記載します。例えば「h1の文字の大きさを50px」にしたい場合は、「h1の（どこの）」「文字の大きさ（何を）を」「50pxにする…
さて、ロードマップ通りに3月から勉強を進めてきましたが、ようやくHTMLの基礎を学び終わりました。我ながら時間かかりすぎては？？？？と思いますが、あれこれしながら自分のペースで勉強してきたため、挫折せず続けてきたことだけ評価していただければと思います。 調べればまだまだ色んなタグや属性、使い方があるのはわかってるんですが、一先ずはロードマップ通りに習得できたということにしましょう。つらつら勉強してきたこと、勉強して疑問に感じた事をずっと書き残してきたため、今後の（自分の）見直し用に下記に簡易リンクを設置しておきます。 HTML 基礎勉強まとめ 基礎タグ編 ・HTMLについて1から勉強しなおして…
本日の教材動画はこちら 最後に今まで習ったフォーム関連の仕上げともいえる、送信ボタンについてです。 ＜ボタン＞の種類について まずボタンには下記の2タイプ（2タグ）が存在します。 【 inputタグ / type="submit" 】 入力したデータを送信するときに押すボタン。そのままですね！データ送信以外には基本使われないらしい。ボタンとして表示したい文字は value="〇〇" で指定。使い方は＜input type="submit" value="〇〇"＞となる。 【 buttonタグ / Javascrip】 こちらはJavaScripなどを使って処理を実行するのに使うボタン。重要なの…
本日の教材動画はこちら 今日はフォームのグルーピングについての勉強です！グルーピングには主に＜fildset＞と＜legend＞を組み合わせて使い、より便利に使うために＜label＞タグを使うことができます。 ＜fildset＞タグ 複数の入力欄をまとめるのに使用する。タグで囲ったところは四角の枠線でまとめて表示されるようになる。使い方は＜fildset＞＜/fildset＞で、タグ内にまとめたい入力欄のタグを入力する。 ＜legend＞タグ 上記の＜fildset＞タグでまとめた項目に説明をつけることができる。テーブルで言う表題のようなもの。使い方は＜legend＞〇〇＜/legend＞で、…
本日の教材動画はこちら 前回選択式入力のタイプについて勉強しました。「1つしか選択できないタイプ」にはラジオボタンとドロップダウンメニューがあることを学び、ラジオボタンの使い方を習いましたが、今回は前回説明されなかった「ドロップダウンメニュー」について勉強していきたいと思います。 ＜ドロップダウンメニュー＞について ドロップダウンメニューは、以下の要素を組み合わせて使います。 ・＜select＞タグ ・＜name＞属性（selectタグと併用） ・＜option＞タグ ・＜value＞属性（optionタグと併用） ＜optgroup＞タグ ドロップダウンメニューは上記の要素のみで使用可能だが…
本日の教材動画はこちら 選択式入力のタイプについて 選択式の入力タイプには下記の二つがある ・1つしか選択ができないタイプ （ラジオボタン / ドロップダウンメニュー ） ・複数選択ができるタイプ （チェックボックス） ＜ラジオボタン＞について 用意された選択肢を1つしか選択できないタイプ。タグの他にname属性とvalue属性の指定が必要。name属性が同じものの中から選択することになり、value属性で送信される値を指定する形になる。 使い方は＜input type="radio" name="〇〇" value="●●"＞。タグ横に選択させたい文字を入力する（＜input type="r…
本日の教材動画はこちら テキスト入力のタイプについて テキスト入力には下記の3タイプがある ・1行タイプ （ inputタグ / type"text" ） ・パスワードタイプ （ inputタグ / type"passeord" ） ・複数行入力できるタイプ （ textareaタグ ） ＜1行タイプ＞について 1行タイプは名前の通り、1行だけの簡単な入力フォームの事。フォームに入力した文字がそのまま表示される。使い方は＜input type="text"＞ ＜パスワードタイプ＞について パスワードタイプは1行タイプと同じ入力フォームだが、フォームに入力した文字はそのまま出力されず *** で…
本日の教材動画はこちら 表（テーブル）タグについては前回勉強しましたが、今回はそこに追加できる要素としてテーブルのヘッダーとフッター、それとボディタグについて勉強します。 ヘッダーとボディについてはなんとなくわかるんですが、フッターってなんぞ？？って思って調べてみたら、主にリンクやコピーライトなど、本文より下に表示される部分の事らしいですね。Excel的考えで行くといつも変わらず挿入する部分って認識でいいのかな！ ＜thead＞タグ テーブルにおけるヘッダータグ。タイトル部分に利用する。使い方は＜thead＞＜/thead＞で、trタグを挟むようにして使う。1テーブルにつき1個配置可能。 ＜t…
本日の教材動画はこちら ＜テーブル＞について テーブルは、「行」と「セル」でできた表の事。一番馴染みがありそうなのはExcelですかね？Excelの表をプログラムの力で表現するのがテーブルである。 昔HPを自作してた頃はテーブルに頼りまくったデザインをしてたんですが、今はデザインにテーブルを使ってはいけないという暗黙のルールがあるらしい。なんでだ？て思って調べてみたところ、暗黙のルールの出所はわからなかったが、そもそも昔と今とじゃテーブルに使える属性が大幅に違うとのこと。 テーブルタグに色々くっつけてデザインするってこと自体ができなくなったため、テーブルタグのみでデザインするなって言われてるん…
本日の教材動画はこちら ＜コメント＞について コメントとは、「あとで読み返すときに内容を分かりやすくするための、“プログラムではない”表記のこと。注釈みたいな扱いでいいのかな？プログラムではないため、ページ内への実行や反映はされません。 コメントタグで表示を無効化することを「コメントアウト」と呼び、一部をコメントする事によってその動作をスキップさせることができる手法があり、主にデバッグで使用されるコメント利用法のようです。デバッグでどう使うのかはわかりませんが、紹介されてた以下の使い方は便利そうですね！ ■一時的に表示を無効化 メンテナンス中などで広告タグを一時的に非表示にしておきたい時などは…
本日の教材動画はこちら 今回の内容はインラインフレーム、略してiframeについて。インラインフレームは、特定のファイルをページの一部として表示させる機能を持つ。 ＜iframe＞タグ 使い方は＜ifame＞＜/iframe＞で、タグ内に下記の属性をつけ足していって運用する。基本カッコ内の中身はなくてもいいが、インラインフレームに対応していないブラウザもある。そのため未対応の人用に、カッコ内に「このページはiframe対応ページでご覧ください」などいれておくと親切。 ＜src＞属性について 表示させるファイルの場所を指定するのに使う。使い方はいつも通り src="パス"。 ＜width＞属性と…
本日の教材動画はこちら 今回はファイルの読み込みについて勉強。しかしあくまで概念のみで中身については今後？勉強するようだ。一先ず本日の動画から吸収できた内容を下記にメモしておきます。 ＜link＞タグ 単独タグ。主にCSSやスタイルシート、Favicom（ブクマした際に表示されるアイコン）を読み込ませる際に使われるタグ。使い方は＜link ～～＞で、～～に必要項目を追加していく。 ＜script＞タグ JavaScriptを読み込ませるときや直接ページ内に記載する時に使うタグ。使い方は＜script＞＜/script＞で、linkタグ同様、タグ内に色々追加して使う形となる。 ＜link＞タグの…
本日の教材動画はこちら 前回の記事で一瞬だけimgタグについて触れましたが、今回はそのimgタグの使い方を勉強しました。一通り見ましたがこのタグは昔から使い方が変わってないみたいで個人的に謎の安心感があります。 あと内容にあまり関係ありませんが、前回相対パスと絶対パスを勉強したので、今後パス表記できる箇所は「パス」で記載を統一しようかと思います！折角勉強したしね！！絶対パスでしか記載しない所は分かりやすく今後も「URL」で表記します。よしなに。 ＜img＞タグ ＜/ ＞で終わらせなくてOKなタイプの単独タグです。使い方は＜img src="パス"＞。これだけでも機能しますが、後述する属性をつけ…
本日の教材動画はこちら そもそもパスってなんぞ？って話ですが、パス＝道という意味で、ネット上だと「ファイルまでの行き方」として使われる。ようはファイルの住所ですね！どこかへリンクを貼る際は、必ず下記のどちらかを使う形になります。 ＜相対パス＞について 「今いる場所からみて相手がどこにいるのか」を基準にして場所を指定する。道案内でいうと「ここから右に行って、次の角を左です」という感じね！使い方は… ・今いる場所（フォルダ）にあるファイル：ファイル名 ・今いる場所（フォルダ）の中にあるファイル：フォルダ名/ファイル名 ・今いる場所（フォルダ）の1階層上にあるファイル：../ファイル名 ・今いる場所…
本日の教材動画はこちら ＜アンカー＞タグ アンカータグとは名の通り錨で、ネット上だとひっかける先になる。簡単に言うとリンク先ですね！タグは＜a＞＜/a＞。これだけだと機能しないので、以下の属性2つとセットにして使用する。 ＜href＞属性 外部サイトへリンクしたい場合はこっちを使う。使い方は＜a href="URL"＞〇〇〇＜/a＞。〇〇〇部分がクリックできるようになり、クリックするとURL部分へ飛ばされる。 ネットでめっちゃみるタグですね！！ずっと＜a href=""＞っていうタグだと思ってたので分解できたことにびっくりしました。あと読み方がずっと分からず勝手に「あへあー」って呼んでたんです…
本日の教材動画はこちら ＜dl＞タグ 項目と内容がセットであることを表すタグ。使い方はセットにしたい内容を＜dl＞＜/dl＞で囲む。後述する＜dt＞と＜dd＞タグを中に入れて使う。セットってなんぞ？って思ったが、「質問」と「その答え」など、項目→その内容という使い方がメインらしい。 ＜dt＞タグ 項目名を表すタグ。使い方は＜dt＞＜/dt＞。上記説明でいうところの「質問」部分。 ＜dd＞タグ 項目の内容を表すタグ。使い方は＜dd＞＜/dd＞。上記説明でいうところの「答え」部分。 前回勉強したリストとは使い方が似てますね！ただこっちは箇条書きじゃなくてセットありきで、おそらく内容もしっかり書き込…
本日の教材動画はこちら ＜ol＞タグ 順番が関わる、番号ありのリスト。使い方は＜ol＞＜/ol＞。内側に後ほど記載する＜li＞タグをいれることで機能するようになる。olタグでリストを作ると、リストの数を数えて自動的に 1. 2. 3. とリストに順番をつけてくれる。 ＜ul＞タグ こっちは順番が関わらない、番号なしのリスト。使い方は＜ul＞＜/ul＞でolと同じように中に＜li＞タグを挟んで使う。こっちはリストに番号が出ない代わりに、リストの先頭に●などをつけてくれるようになる。 ＜li＞タグ（リスト項目） リストの中身。使い方は＜li＞＜/li＞で、olかulタグの中に入れて使う（例：＜ol…
本日の教材動画はこちら ＜code＞タグ 使い方は＜code＞＜/code＞。囲った部分はコードですよ～と教えてくれるタグ。囲うちょっと若干見た目が変わる（私のブラウザでは斜体になった） ＜br＞タグ 前々から当然のように使っており前回少しだけ触れましたが、改行を意味する単独タグです。使い方は改行したい文末に＜br＞と入れるだけ。 そういえばたまに＜br /＞もみるけど、何が違うのかしら？って調べてみたところ、ぶっちゃけ何も違わないそうです。 ＜br /＞は、XHTMLの構文を機に採用され、DOCTYPEが「XHTMl1.0」「XHTML1.1」などの場合に、BRタグ含む全ての空要素をスラッシ…
本日の教材動画はこちら ＜abbr＞タグ 「ここは略語ですよ～」ということを知らせるタグ。使い方は＜addr＞＜/addr＞。ただこれだけでは見た目上何も変化が起きないため、後述するタグとセットで使う。 ＜title＞属性について ＜abbr＞タグだけでは何も起きないので、一緒に「略語の元はこれですよ～」というタグをつけてあげる必要がある。それがこのtitle属性で、使い方は＜abbr title="省略前の単語"＞＜/abbr＞となる。 title属性をつけてあげることにより、abbrタグで囲んだ文字にカーソルを合わせると省略前の単語が見えるようになる（マウスオーバーすることでtitleで入…
本日の教材動画はこちらとなります。 ＜blockquote＞タグ ブロックごと引用するタグ。使い方は＜blackwuote＞＜/blackquote＞。タグで囲むと囲んだ文章が一段字下がりする。 ＜q＞タグ 一部を引用するためのタグ。使い方は＜q＞＜/q＞。タグで囲むと囲まれた文章が " " で囲まれる。 ＜cite＞の属性と要素について 「引用元の表記」をするためのタグ。タグというかタグ内にいれる属性。まとめて引用、一部を引用どちらにも使え、タグの後に追記することで効果を発揮する。使い方は＜blockquote cite="引用URL"＞または＜q cite="引用URL"＞。 cite属性…
本日の教材動画はこちら。 ＜em＞タグ 文字を強調する。強調すると斜体になるが、「斜体にしたいからemタグを使う」のではなく、「強調した結果斜体で表示される」という認識が正しいとのこと。使い方は＜em＞＜/em＞。 ＜strong＞タグ 文字を太字にする。こっちも「太字にしたいからstrongタグを使う」のではなく、「重要性を表示した結果太字で表示されている」という認識が大事。使い方は＜strong＞＜/strong＞ ＜hr＞タグ 区切り線を表示される。文字を囲む必要はなく単独で使える。使い方は区切りたい場所に＜hr＞を書くだけでOK。 emタグやstrongタグは、あくまでブラウザが解釈し…
コロナ騒動でバタバタしてたらなんだか久しぶりな日記になってしまった。世界中コロナパニックが起きていますが私は今日も元気です。期間は空いたが今日も元気に勉強していこう。 今回使った教材動画はこちら 33歳主婦、HTMLの基礎タグを学びなおす ＜p＞タグ 段落を変えるためのタグ。使い方は文章を＜p＞＜/p＞で囲うだけ。今使ってるこのはてなブログは改行全てを＜p＞でするようだ。他ブログは＜br＞だったりするしなんか使い分ける理由あるのかしらね。好み…？ 私の知識は15年くらい前で止まってるため昔から＜br＞を多用してたんですが、最近は＜p＞タグで改行するのが主流の様子。なんで＜br＞じゃだめなんだ？…
本日使った教材動画はこちら さっそく見慣れないタグが一つあり不安を覚える主婦。 33歳主婦、HTMLの基礎タグを学びなおす ＜meta＞タグ 文章の情報を伝えるために使われる。初めて見た。書き方は＜meta charser="UTF-8"＞。UTF-8…お前だけはなんか見覚えがあるぞ。メールやサイトの文章が文字化けした時にかえるやつだ！！エンコード帰るときに貴様はみたことがあるぞ。 調べたところUTF-8は世界的に最もポピュラーな文字コードらしい。なるほど。他にもコードはあるだろうがよくわからないので、とりあえずこれを使っておけば安心と覚えておこう。 ＜title＞タグ お前の事は知っているぞ…
さて、早速前回記載したロードマップに沿って勉強を始めてみた。 本日使ったのは下記動画。1-1と1-2はHTMLのなんたるかのお話なのでここでは飛ばす。とりあえず拡張子を.htmlで保存するという部分は変わってないようで安心した。 以前は漠然とHTMLを使ってたが、それぞれの意味がわかるとなかなかおもしろい。あと下記に記載するが、昔と記載方法が若干変わってるのが個人的にかなり新鮮だった。 33歳主婦、HTMLの基礎タグを学びなおす ＜doctype＞ まず最初にお？と思ったのがこのタグ。以前HTMLを学んでいたときはこんなタグみたことなかった。「どのHTMLバージョンで書かれているか」を示すタグ…
33歳主婦がプログラマーになるために、どう勉強するつもりなのかを紹介
みなさまはじめまして。僻地の当ブログにお越しいただきありがとうございます。ブログタイトルの通り、ブログ主の33歳主婦です。思い付きで作ったブログですが、記念すべき最初の記事。なぜしがない主婦がこんなブログを作っているのか、最終的にどこを目指しているのかなど、最初に簡単にお伝えできればと思います。 33歳主婦がプログラマーを目指す理由 あまり思い出したくないが、2020年1月に晴れて私も33歳になった。なってしまった。自分的にはまだ若いつもりだが（実際は精神年齢が低いだけ）世間ではそうはいかないらしく、ハロワの求人票の多くは「若年層の長期キャリア形成を図るため」とか言って35歳までの求人をじゃか…
「ブログリーダー」を活用して、33歳主婦さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
