こんにちは、つちだにんじんです。 前回はcssのみでのハンバーガーメニューを作成しましたので、今回はjsを使用してハンバーガーメニューを作成します。 作り方的に、あまり大差ないです（笑） jsを使用してハンバーガーメニューを作成する 結論から言うと作りはこんな感じです。↓ <!-- html --><div class="hamburger" id="hamburger"> <span></span> <span></span> <span></sp
こんにちは、つちだ人参です。 神経痛になりやすい身なもので、体力仕事の際には腰痛に悩まされていましたが、デスクワークになった現在、腰痛に加えて首と肩こりからくる痛みにも悩まされるようになりました。 全身が痛み出す日もそう遠くないのかもしれません・・・（絶望） 今回は、webにおけるハンバーガーメニューを作ります。 sp表示にしたときに三本線ボタンからメニューを表示させるアレです。 jsを使っても作成できますし、cssのみでも作成できます。 個人的には、閲覧者の環境でjsを
こんにちは、つちだにんじんです。 最近「逃げ若」にどハマりして生きるのが楽しいです（余談） 余談はさておき、今回はCSSのドロップシャドウとボックスシャドウについて書きます。 ドロップシャドウとボックスシャドウの違いドロップシャドウとボックスシャドウ、似たようなものですが少し違います。 簡単にいえば、ドロップシャドウ＝オブジェクトにシャドウを適用、ボックスシャドウ＝ボックス（箱要素）にシャドウを適用するイメージです。 これは私のHPで検証ツールを用いてそれぞれシャドウを
こんにちは、つちだにんじんです。 先日、ILFORDの使い捨てカメラを現像しました。 ここ数年でフィルムの値上げが半端なくて、なかなか手が出しにくくなってきました・・・。 入荷困難なフィルムも多く、フィルム民には厳しい世になりました。 今回のILFORD使い捨てカメラは、たまたまカメラのキタムラが入荷していたのを購入したものです。 価格は¥2,000くらいだったと思います。 地元のキタムラ、時々珍しいフィルムとか入荷してたりするので嬉しいです。高いけど・・・。 因みにI
こんにちは、つちだにんじんです。 前回は左右中央揃えについて書きましたので、今回は上下（垂直方向）中央揃えについてです。 上下左右中央揃えもいくつか紹介しています。 上下（垂直方向）の中央揃えflex まずはflexの上下中央揃えです。 たぶんこれが一番簡単で単純に中央揃えできるのでないかと思います。 <div class="center">にんじんしりしり</div><div class="center-2">にんじんしりしり</div> /* 上下に中央 */.
こんにちは、夏フェス参戦よりも仕事を選んだことを死ぬほど後悔しているつちだにんじんです。 今回は左右中央揃えにする方法をいくつか書こうと思います。 web制作していると、どうしても中央揃えにしないといけない場面が多々ありますよね・・・。 でもうまくいかないこともしばしば・・・。 そんな時のためにいくつか方法を試せるように、ここにメモを残しておきます。 「数打てばどれか当たるだろ戦法」です。 左右（水平方向）に中央揃え左右中央揃えはめちゃくちゃよく使うものだと思います。
こんにちは、つちだにんじんです。 今回は画像にリンクを貼った時のマウスオーバーの動きのアイディアをいくつか書きます。 内容は全てHTML・CSSのみです。 クローズアップ<div class="link-wrap"> <a href="">ダミー画像</a></div> /*画像の挿入がで着ないためダミー生成*/a{ background: repeating-linear-gradient(45deg, #94b8b4 0px, #94b8b4 5px, #c3d5
こんにちは、つちだにんじんです。 今回はリンクボタンのマウスオーバーでの変化の自分なりのアイディアをいくつか書こうと思います。 一般的によく使われるのは、マウスオーバーで透明度を上げる変化ですよね。 a:hover{ opacity: 0.8;} の一文だけで済んでしまいますし・・・（怠惰） でもでっかくなら、マウスオーバーでの変化でwebサイトを楽しくさせたいですよね！ ということで、いくつか私のマウスオーバーアイディアです！ 色を変えるまずは定番である色を変化さ
こんにちは、つちだにんじんです。 今回は、私なりのCSSででできるアニメーションアイディアをメモしていこうと思います。 私はjQueryやJavaScriptの使い手ではないので、極力HTMLとCSSのみでできるものをいつも模索しています。 悪く言えば怠惰、よく言えば猛者でしょうか・・・・ 私の場合は前者です（反省） でも、なるべくCSSでできる方が読み込みも早いので悪いことではないはずです！！！（開き直り） 点滅するアニメーションまずは点滅するアニメーションです。
こんにちは、つちだにんじんです。 今回はCSSの擬似要素である「::before」と「::after」について書きます。 web初心者でも、この２つの擬似要素はよく使うのではないでしょうか！！ 今回はそんな２つの擬似要素についてです。 ::before、::afterとは？::beforeと::afterとは何かというと、指定した要素の前（::before）や後（::after）に要素を追加することのできるものです。 例えば こんな風にdivに対して前や後に要素を追加で
こんにちは、つちだにんじんです。 今回は要素を横並びにするときに使うflexについて書きます。 これ、とても便利なので知っておいて損はないです！！！ flexについてflexとは、CSSのdisplayプロパティの値のひとつです。 display: flex;を指定すると、指定の要素内にあるものを横並びにしてくれます。 flexを指定するのは、横並びにしたいものを入れている箱（親要素）に指定します。 <!---HTML--><div class="flex-box">
こんにちは、つちだにんじんです。 今回はAdobe Illustratorでのパターンの作成方法を紹介します。 パターンというのは、 このように、好きなパターン模様を作り、塗りなどに設定できる機能です。 塗りだけでなく、線にもパターンを適応させることができます。 作成方法パターンに登録したい模様を作成する ここから作成方法を書きます。 まず、パターンに登録したい模様を作成します。 模様は好きな模様でOKです！！ 模様を作るときに、あまり上下左右に隙間があるとパターン
こんにちは、つちだにんじんです。 今回はGoogleフォントについて書きます。 web上だとフォントに限りがあって、デザインの幅が狭まりますよね・・・ そんな中でも、Googleフォントを使えばフォントの幅も広がるのでお勧めです！！ Googleフォントとは？Googleフォントは、Googleフォントで提供されているフォントをwebサイトに読み込むことで、そのフォントを表示することができるようになるというものです。 Chrome以外のOSでも表示してくれるので、とても
こんにちは、つちだにんじんです。 今回はweb制作における、レスポンシブに対応させる方法について自分なりのメモを残しておこうと思います。 レスポンシブに対応させるのって、結構面倒くさいですよね・・・ @mediaレスポンシブに対応させる書き方として多く使われているのがこの「@media」だと思います。 @maediaは、「どのようなメディアの際にこの内容を反映させますか？」みたいな感じです。 例えば下記のような・・・↓ @media screen and (max-wi
こんにちは、つちだにんじんです。 今回はAdobe Illustratorで飛び出す文字を作る方法を書きます。 テキストを用意するまずは飛び出させたいテキストを用意します。 フォントはなんでもOKです！ アウトラインをかけなくてもできますので、後々テキスト修正する可能性があることを考えれば、アウトラインはかけない方がいいかと思います！ テキストに境界線をつける 次に、テキストに境界線を設定します。 普通に線を設定するだけだと、きっと文字の内側に線が入っていってしまうと
こんにちは、つちだにんじんです。 今回は、cssの「:root」について書きます。 実は私も最近知って、「はえー！便利ー！」と感動したばかりです笑 :rootについて「:root」は、cssの擬似クラスの一つです。 擬似クラスは他にも「:hover」「::before」「::after」「:nth-of-type」などたくさんあって、セレクタに付与して使うものです。 今回は:rootを使って変数を定義する便利な方法を紹介します。 （cssの値のテンプレみたいなのが設定でき
