この記事の概要 パララックスを実装する際、setTimeoutやthrottleで間引くケースがあると思います。 しかし、単にスクロール量にあわせてアニメーションがしたいだけならCSSの@scro…

概要 掲題の通り、CSSの色などで使用する%と16進数の対応表です。 1%ごとに+2〜+3されていき、10%は1A、20%は33となります。 例えば#FFFFFF4Dというカラーコードがデザインフ…

はじめに 新人エンジニアの私がビューを作成しているときに犯したうっかりミスをいくつか紹介します。 反面教師にして、皆さんもお気をつけください。 新人エンジニアがView作成時にするうっかりミス ウ…

はじめに プログラミング学習中の@kat_logと申します。 自作アプリにてdiv内に、画像を真ん中に置きたいのに右に空白ができてしまい困っていたのですが、解決したため情報共有です。 （アプリはR…

パターン1 イメージ HTML <a class="scroll" href="#link-about" data-scroll="" aria-label="scroll" title="scr…

概要 タイトルをクリックしたらコンテンツが開閉される。 Boxは配下は一つのページで複数表示されることを想定し、idでなくclassで制御している。 HTML <dl class="accordi…

概要 ページを開いたらローディングが表示され、指定の秒数が経ったらページ（要素）が見えるようにする。 使用するアニメーション（プラグイン） Loaders.css https://connorat…

指定のスクロール位置がブラウザトップに到達したらバナー（要素）を出現させる。 HTML <div id="floatBnr-start">バナーイン位置</div> <!-- 中略 --> <div…

■要素の縦の長さを指定する。 height: Xpx; ■要素の横の長さを指定する。 width: Xpx; ■要素の横の長さを文字列長に合わせる display:inline-block; ■余白…

フレックスボックスを使ってみよう 親要素にdisplay:flex;で横並び flex:1;と指定すると １つ目のボックスが伸びて、なおかつブラウザの幅に合わせて柔軟に幅が変わる。 関連用語につい…

CSSの基本セレクターを学んでみよう まず、 h1{ color:red; } h1をセレクター、color:red;を宣言と呼ぶ。 idセレクターを使おう id属性は同じページ内で同じ値を使って…

スタイルを継承を理解しよう 継承されるかどうか調べるときはMDNの仕様書を見る。 継承されないプロパティ例えばborderを子要素にも継承したかった場合、 子要素にinheritというキーワードを…

はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにして…