デザイン新しくしました。
2021年2月21日
CSSのみでタブ切り替え
■ソースコード全体 See the Pen CSSのみでタブ切り替え by ささ (@mygod877) on CodePen. ■仕組み 以下の3つの性質を利用することによって、タブ切り替え機能を実現する。 1.ラジオ……
記事の続きを読む
2019年10月18日
【CSS】textareaのoutlineをbottomだけ表示したい
textarea { outline: none; }を指定したあとに textarea:focus { border-bottom: 1px solid #f00; }を指定します。 See the Pen outli……
記事の続きを読む
2019年8月6日
【JavaScript】アロー関数式()=>{}と従来の無名関数でthisの挙動が違う件
題名の件、みごとにハマってしまいました… 脳死で以下のようなイベントハンドラを書いて いざ試そうとブラウザを更新、ボタンクリックしても動かない… 実は、()=>{}とfunction(){}ではthisの扱いが違う……
記事の続きを読む
2019年5月18日
【.scssじゃない】SASS記法でメディアクエリ(mapとmixin&include)
一度知ってしまえばそれまでなのですが世の中ではまだまだ SASS記法があまり浸透していないみたいで「sass メディアクエリ」と 調べてもSCSS記法のコードしか見つけられない人のために載せておきます ソースコード まず……
記事の続きを読む
2019年4月11日
【Webデザイン】CSSで海外サイトによくある文字の輪郭をなぞるアニメーションを作る
SVGファイルをGIMPなどで作る 今回は無料画像編集ソフトGIMPを使っていきます。 まずは[ファイル]->[新しい画像]でキャンパスを作ります。 キャンパスの大きさはお好みで適当に。 決まったらOKを押してくだ……
記事の続きを読む
2019年4月10日
【Webデザイン】CSS3+SVGで便利なスマホ用円形メニューを作る
皆さんはスマホをどんな時に使いますか？ 通勤中、寝る前、ご飯を食べながら、トイレの中でetc… そんなときふとこう思ったことはありませんか？ 「このサイト片手でこのメニュー開きにくいなー」 というわけで今回はスマホを……
記事の続きを読む
2019年4月9日
【CSS】nav-barをflexboxを使って簡単に作る
どのサイトにも大体存在するnav-bar？ヘッダーバー？ ちゃんとした名称は知らないけどこんなやつありますよね。 サイトを作ったことあるひとなら一度はこのnav-barを作るの めんどいなーとか思ったことあるかもしれませ……
記事の続きを読む
2019年4月8日
【CSS】上下左右で中央寄せする方法
上下左右で中央寄せ 中央寄せさせたいボックスの親要素にこの3行を適用させるだけです。
記事の続きを読む