波線の背景のものってオシャレでかっこよくないですか？ でもどうやってコーディングするの？ 難しそう・・・と思い込んでいましたが 実際にやってみたら思ったより簡単だったので紹介します！ SVGコードをHTMLファイルに記述する場合 SVG画像はテキストベースで作成し保存されているので コードをコピーし貼り付けることでSVG画像を表示させることができます。 デザインからコードをコピーしよう XD、Figmaの場合 XDやFigmaのデザインカンプの場合、波線の部分を選択した状態で右クリックすると 「SVGとし ...

みなさんこんにちは！ 今回は背景色を２色に分ける方法を解説します！ また、画像と背景を重ねたレイアウトにも使える方法を 応用編としてご紹介しています！ 背景を２色に分けるには？ 背景を２色に分ける場合、セクション別などブロックで指定する場合は それぞれに背景色を指定してあげればいいので簡単です。 背景を指定する方法はbackgroundプロパティです。 別記事にてbackgroundプロパティについて書いてありますので 詳しく知りたい方はそちらをご覧ください。 では一つの要素内で背景色を分けるにはどうした ...

皆様、こんにちは！ デザインのインパクトになるグラデーション。 今回はグラデーションについて解説しています。 そしてグラデーションを使ったボタンの作り方について解説していきます。 ベーシックなものからホバーの動きがあるのも、文字のグラデーションなどの 実装例も紹介しております。 これを機にグラデーションの作り方をマスターしましょう！ グラデーションの作り方 まず初めにグラデーションの作り方を解説しますね！ CSSでグラデーションを表現するにはbackgroundプロパティを使います。 グラデーションのタイ ...

皆さんこんにちは！ デザインで二重線を使ったものって見出しやボタンでよく見かけますよね。 今回はそんな時に便利なborderプロパティの便利な使い方について解説します！ さらにborderプロパティを使って三重線を再現する方法や よくある二重線のレイアウトも紹介しています！ また、別記事でborderプロパティを使って破線や点線の作り方も解説しています。 ご興味ある方はそちらもどうぞご覧になってください！ borderプロパティを使って二重線を作ろう！ borderプロパティを使えば簡単に二重線が出来ちゃ ...

子育て中のママさん、パパさんにも人気のWeb制作のお仕事ですが、学習時間がそもそも確保できず挫折してしまう方もたくさんいらっしゃると思います！
お恥ずかしい話ですが、私も挫折を繰り返しており、2年ほど学習期間があります・・・。
そんな方々に少しでも参考になれればと思い、学習時期のライフスタイルや時間の捻出方法、マインドなどをご紹介させていただきます！

点線や破線を利用したウェブデザインはよく見かけるデザインですよね。 今回はCSSを使って点線や破線の作り方を解説していきます！ 特に点と点の間を調節したい方には必見！！ 自分でカスタマイズした点線や破線を作ってデザインの再現性を高めていきましょう。 borderプロパティを使って破線と点線を作る 破線や点線のスタイルを指定する場合、まずborderプロパティを使ってみましょう。 破線の場合はdashedを使います。 点線の場合はdottedです。 See the Pen 点線破線 by kanae (@s ...

サイトのメインビジュアルをコーディングする際、 画像を画面幅いっぱいに広げて表示させたい時ありますよね？ しかもレスポンシブに対応させるために、 横幅は可変させて、でも画面の高さは固定した状態にしたい・・・！！ そんな時、使えるのがobject-fitプロパティです！ 今回は高さは固定させた状態で、横幅は可変させる方法を解説します！ object-fitプロパティの基本的な使い方は 他記事で解説してますので、気になる方はそちらもご覧ください。 高さを固定値にして横幅を可変させる場合 横幅を可変させる場合、 ...

コーディングする際に画像のサイズや比率を調整するのが一苦労だったりしませんか？ でも心配しないでください！ そんな悩みを一瞬で解決してくれるのがobject-fitプロパティです。 これさえ使えば、画像を自由自在にリサイズしてもアスペクト比を守りながら、画像が表示できちゃうんです！ さらに、画像の位置指定ができるobject-positionプロパティ。 今回は、そんなobject-fitプロパティとobject-positionプロパティの使い方を解説します！ 今回のポイントを簡単に説明するとこちらにな ...

こんにちは！ 現在、フリーランスで活動しながら３人の子どもの子育て真っ最中のかなえと申します。 働くママにとって切っても切り離せれないのが『保活』ですよね。 私は今回、３人目にして初の保活を経験しました（上ふたりは幼稚園です。） 希望する保育園に申し込む際に提出する書類がたくさんあると思います。 その中でも、今回は就労証明書について解説していきます。 就労証明書とは？ 就労証明書（標準的な様式）PDFファイル　/　内閣府 就労証明書は、労働者が雇用されていることや働いている期間など、雇用関係を証明する公的 ...

box-shadowプロパティを利用すると様々な影を表現することができます。 影の色や大きさ、ぼかしの度合いなど、さまざまなパラメータを調整することで、影の表現をカスタマイズすることも可能です。 そのなかでも今回は、要素の下に影をつける方法について解説します。 今回のポイントを簡単に説明するとこちらになります。 もう少し詳しく知りたい方は、下記をご覧になってください。 box-shadowとは？ box-shadowプロパティとは、CSSのプロパティの一つで、要素に影をつけることができます。 説明している ...