Clik here to view.
イメージマップで鍋をつつく。
あらすじ画像に色々埋め込みたくなったので、イメージマップ使ってみました。インデックス目指すものイメージマップを作る拡大・縮小に対応する完成品目指すもの今回使う画像はこちら。この美味しそうな水炊き鍋の「鳥肉」と「豆腐」にホバーしたら文字が表示されるようにします。イメージマップを作る領域を指定するこの作業が一番大事かつ一番めんどいです！簡単にやる方法求む。今回は HTML Imagemap...
View ArticleQiita学習記録 HTML/CSS #2
デイトラDay6inputタグへのスタイルの当て方。inputタグに対しては属性まで指定しておくことで、簡単に同じ型を作ることができる。style.cssinput[type="email"],input[type="text"]{width:600px;border:3pxsolid#d8d8d8;font-size:18px;display:block;margin:auto;index.htm...
View Articleサイコロ２ ～CSSを使って角丸サイコロを作るよ！～
なでしこ３ではDOMスタイル設定、DOMスタイル一括設定を使ってCSSを操作できるので、それを使って角丸サイコロを作ります。なでしこ3マニュアル > plugin_browser/DOM操作tableを設置 前回、サイコロの目の位置って３×３のテーブルみたいなことじゃね？ というコトに気が付いたので、tableを使って作ることにする。...
View Articleアコーディオン内のメニュークリック後、アコーディオンを閉じページ内リンク先に移動する
はじめにこんにちは、フロントエンドエンジニア歴1年目で日々勉強中のズミです。実はQiita初投稿・・ドキドキです。記念すべき初投稿では、アコーディオン内のメニューをクリックしたあとに、アコーディオンが閉じてページ内リンク先に移動する動きの実装をご紹介します。案件で実装するにあたり苦労したのですが、意外と短いコードで解決できました。それでは、いきましょう！まずはslideToggleでアコーディオンメ...
View ArticleSass本来の力を(自分に)取り戻す
こんにちは🐱Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2020...
View ArticleCSSでつまづいたこと
やっぱりfloatが分からんなんかfloatを無効化するのにclearfixなるものがあるらしい。clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfixそしてその進化版のdisplay: flow-root;というのもあるとのこと。これ↓はわかりやすかった。CSSのマージンが効かない時の解決法（marginの縮小・折りたたみ）
View ArticleClik here to view.
マイクロソフト公式のWeb開発入門コースに触れてみた
この記事は「【マイスター・ギルド】本物の Advent Calendar 2020」8日目の記事です。今年11月から入社いたしましたマイスター・ギルド（以下MG）開発部の吉川です。Qiita初投稿となります。やろうと思ったきっかけはてなブックマークの方で話題になっていたことがきっかけです。...
View Articlecssとjsで overflow:hidden の要素を上下に開閉アニメーション
概要cssとjsで overflow:hiddenの要素を上下に開閉アニメーションします。動作の流れ同じ要素をhiddenでクローン作成高さを取得取得した高さを max-heightとして設定cssの transitionでイイ感じにアニメーションソースコードexample.html<!DOCTYPE...
View ArticleClik here to view.
【初心者でもわかる】文字と文字の間隔を調整する方法
どうも7noteです。字間の調整方法についてデザインツールなどでは綺麗に見せるために字間を細かく調整する機能がついています。実はCSSでも字間を調節することが可能です。※上は通常、下が字間を調整した例。ソースindex.html<p>あいうえお</p>style.cssp{letter-spacing:10px;/* 字間を10pxに指定...
View ArticleStripe + Herokuで決済サービスを作る時のメモ
はじめStripeという決済サービスを使って、支払いだけのページを作成しました！その時のメモを残しておこうと思います。今回はStripeの登録方法は割愛します!ソースコード取得するherokuを使う実装環境(html/css/js + node.js)1....
View ArticleClik here to view.
知っておくだけで楽に開発できる便利なCSSを紹介します！
昨今CSSの新しいプロパティがたくさん増え流れについていけないませんよね・・・僕もその一人です。何とか色々と情報収拾を行なって自分で使ってこれはいいな！と思えたものを今日は紹介したいと思います！目次calc()で計算をするCSSでトリミングしスタイルを整えるCSSで速度改善！？できるんです。デザインカンプのように文字詰めをする（カーニング）複数行の文字省略する今まで以上に豊富な波線や記号をテキストに...
View ArticleClik here to view.
ユーザーに優しいローディング画面「スケルトンスクリーン」
はじめまして。アドベントカレンダー初参戦のフロントエンド1年生です。（1月で2年生👏）以前ふと耳にした言葉「スケルトンスクリーン」がずっと気になっていたので、これを機に皆さまにも共有できたらと思います。スケルトンスクリーンとはスケルトンスクリーンはご存知ですか？名前を聞いたことがない方も、きっとどこかで見たことがあると思います。↓この人です。ページやコンテンツの読み込み中、真っ白なページが長く続くと...
View ArticleClik here to view.
CSSでクリスマスっぽいお絵かきをしてみた！
はじめにこんにちは！12期WebDジョニーです！「Life is Tech ! Tokai Advent Calendar...
View ArticleCSS：応用編（アニメーション）
CSSでアニメーションこのCSS・・・動くぞ！をメインタイトルに書いていきます！他にも書きたいことはいっぱいありますが、まずはアニメーションで。アニメーションさせようCSSでのアニメーションはCSS3から対応となっています。簡易的なアニメーションであればCSSだけで対応可能です！transitiontransitionを使うだけでも簡易的なアニメーションは可能です。まずは下記コードをご覧ください。...
View ArticleClik here to view.
メディアクエリを用いてレスポンシブ対応させてみる
世の中にはたくさんの種類のPCやスマートフォンが流通しており、画面サイズも様々です。画面サイズに関してはWebページを作成する際も考慮すべき項目の一つであり、どの画面から見ても見えやすいように作成する必要があります。その課題を解決するために用いられる手段の一つにメディアクエリが存在します。メディアクエリメディアクエリは端末の環境に応じてスタイルを変更したいときに用いられます。@media only...
View Article中央揃えの手法とその使う場面
中央揃えの手法とその使う場面1 margin: auto;何に対してmargin: auto;を適用させるか中央揃えしたい要素使う場面中央揃えしたい要素がブロック要素の時ただし、この中央揃えしたい要素にはしっかり幅を設定してあげておいてください See the Pen margin: auto; by Kazuhito Nakayama (@kazuhito-nakayama) on...
View Articleecho "hello, darkness" ~Webサービスにおけるダークモードという闇~
闇の魔術に対する防衛術 Advent Calendar 2020の11日目の記事です(当日参加登録)。現在、明日(12日目)も、明後日(13日目)もエントリーはありません。あなたの抱えている闇を記事にしてみませんか？echo "hello, darkness"echo "hello, darkness"...
View ArticleClik here to view.
Qiita学習記録 HTML/CSS #3
デイトラDay7スマホ用にレスポンシブ対応・ポイントはメディアクエリとブレイクポイントstyle.css.course-wrapper{flex-wrap:wrap;}画面の横幅のサイズを超えた時自動的に改行を行うWrapレスポンシブ表示に限らずPC表示でも役立つ。...
View ArticleClik here to view.
初心者でも簡単！マウスカーソルについてくるやつを作る方法
どうも7noteです。カーソルにくっつける要素を作ります。こんな感じのものを作ります。このようにカーソルについてくる要素の作り方について解説していきます。ゆっくり動かしたり、カーソルを好きな画像に変える方法も紹介していきます。作り方index.html<divid="cursor"></div><!-- カーソルについてくる要素...
View Article