おしゃれなボタンを作ってみる 3日目【WEBサイトを作る30日チャレンジ】
レインボーに光るボタンをつくってみた ・前回使用したWEBサイトを活用します https://qiita.com/pontarou194/items/321305d55049022f06ed ・背景は黒にしました ・ボタンにカーソルをあわせると、レインボーに光る仕様にしました完成したWEBサイトはこちら完成したコードはこちらです。<!DOCTYPE...
View Articleオリジナルスライドショー作ってみる
プログラム用語ってキャラクターの名前みたいですね。ちなみに単語からイメージが膨らんだのでテスト素材として作成しました。見本はgifアニメです。動きがスムーズではないので動作確認用のデモ画面をCodePenの方で作りました。見本画像にリンクを貼っています。1.ドットスライドサンプルイメージCodePenはこちら...
View Article2020/06/07 プログラミング(WEBデザイン)学習8日目 メモ
本日の学習範囲(学習時間:2時間)ドットインストール・詳解CSS レスポンシブウェブデザイン編 #01〜#02基本情報技術者テキスト・特集部分(このあと読む)HTML学習メモviewportWebページの表示領域<meta name="viewport" content="width=device-width,...
View Article初心者によるプログラミング学習ログ 338日目
100日チャレンジの338日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 338日目は、おはようございます338日目...
View Article【HTML】position: fixed;要素に対してz-indexが効かない現象
問題点青のz-indexの値を赤より大きくしても、重なりの順番が変わらない原因要素にposition: fixed;を指定している場合、z-indexの値にかかわらず、その固定させた要素が前面に表示される解決策固定要素よりも前面に表示させたい要素に、position: static;を指定固定要素のz-indexを負の値に変更ソースhtml<divclass="red">z-index:...
View Articleロゴをおしゃれに表示させてみる 4日目【WEBサイトを作る30日チャレンジ】
ロゴにhoverした際にアニメーションが動くようにする ・animate.cssを使用します。CDNを利用します。↓ https://animate.style/...
View ArticleCSS詳細度について理解するメモ
この記事についてこれまでCSSの詳細度についてなんとなくしか知らなかった人向けの解説。属性セレクタの使い方とか基本的な事項はここで解説しませんので他の解説記事などを読んでください。詳細度って何?CSSのスタイルが競合したときに優先される順位(強さ)を表す点数。あまり知られていない隠しパラメータ的存在(?)いくつかの例外!important基本的に他のどんな指定よりも優先される。インラインスタイル(s...
View Article2020/06/08 プログラミング(WEBデザイン)学習9日目 メモ
本日の学習範囲模写コーディング【無料練習素材】あなたはできる?模写コーディング腕試し!|東京フリーランス|notehttps://note.com/tokyofreelance/n/n4baf7dd10306(学習時間:6時間)学習メモ遅くなったので明日記載その他↓は先日作成したPC画面用がこちら。改めて確認したところ、ヘッダー部分のメニューにリンクが付いてなかったので、追加した。その後、未作成だっ...
View Article初心者によるプログラミング学習ログ 339日目
100日チャレンジの339目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 339日目は、おはようございます339日目...
View ArticleCSSで長文を省力する際に学んだ方法
最近の勉強で学んだ事を、ノート代わりにまとめていきます。主に自分の学習の流れを振り返りで残す形なので色々、省いてます。 Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです!複数行の文章を省略複数行テキストの末尾を…(3点リーダー)で省略したい。以下のコードを使用したら簡単に実現できたがデメリットとしてなどがある - IEで未対応 -...
View Articlejavascript 表示内容を切り替えるタブの制作
今回javascriptで表示内容を切り替えるタブを制作します。CSSでも作れますがjsの勉強も兼ねて作成してみましょう。今回制作するタブ3つのタブがあり選択すると中身が切り替わります。コンソールも載せていますがクリックイベントで指定要素に...
View ArticleスライドショーをJavascriptで実装してみた 5日目【WEBサイトを作る30日チャレンジ】
簡単なWEBサイトにスライドショーをJavascriptを使って実装 ・なるべくレスポンシブ(スマホ最適化)を意識 ・画像が一定時間で切り替わる仕様にします(今回は5枚用意) ・画像はフリーの画像を使用しました(photo-acさん、ありがとうございます) https://www.photo-ac.com/ ・WEBサイトの基盤は前回作成したものを活用します...
View Article【コーディングが爆速に】HTML/CSSのEmmet入門
はじめにフロントは記述量が多くて大変!もうやだ!嫌い!覚えられない!という方にぜひ知って頂きたいEmmetというものがあります。Emmetを使えば作業効率が格段に上がります。知らなかった頃には戻れなくなります。Emmetとは入力補完プラグインです。HTMLやCSSを省略記法で記述して展開する事で楽に入力することができます。AWS...
View ArticlePRECSSの考え方
はじめに新しく出たcssの設計思想PRECSSについて調べたのでその備忘録です。PRECSSとはPRECSS読み方はプレックス。 prefixed cssの略語で、接頭辞付きcssという意味。ルール・全てのクラス名に役割に応じた2文字の接頭辞をつける。・OOCSS,SMACSS,BEMの思想を反映。・cssのグルーピングは6つ。 1.ベース 2.レイアウト(ly_) 3.モジュール...
View Article初心者によるプログラミング学習ログ 340日目
100日チャレンジの340日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 340日目は、おはようございます340日目 2h・ポートフォリオ作成・pc版作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode—...
View Articleグリッドレイアウトでが表示されない問題
どこ行った、水平線グリッドレイアウトで、<hr>が表示されない!↓コード(抜粋)index.html<body><div>A</div><div>B</div><hr><div>C</div><div>D</div></body>style.cssbody{...
View Article【初心者向け】プログラミング学習に必須なインターネットの用語・仕組み解説(フロントエンド編)
はじめに プログラミング学習を初めて半年立ちますが、アウトプットする力がないと気づき、これから自分の備忘録として学習したことを記事にしていきます。もしアドバイスなどがあればコメントお願いします。前置き...
View Article【CSS】ブロック要素の大きさがpaddingで勝手に変わる問題
はじめにcssでマークアップをしていると、ブロック要素の大きさ(幅、高さ)を指定しているのに、paddingを効かせるとブロック自体の大きさが余計に大きくなってしまうことがないですか?それを解消する方法を紹介します。現象具体的にどんなことが起こるか見てみましょう!まずは適当な大きさのブロックを用意します。htmlファイル<divclass="block">ブロック要素です...
View ArticleCSSでbackgroundのアニメーションをしたらiPhoneで1fpsぐらいしか出ない激重カクカクの時はSVGをPNGに変えると解決する
タイトルで全部言っちゃってるんですけれどもね。
View Article