Clik here to view.
背景画像を左右反転させたい。 transform: scale() ;を使おう
フロント実装の練習アウトプット。まずはこんな画面を作ってみました。HTMLコード<divclass="backImage"><divclass="header"><divclass="title">PG-hummingBird</div><ulclass="topList"><liclass="btn"><ahref="#...
View ArticleClik here to view.
スクロール率表示とおしゃれなスクロールバーを実装 9日目【WEBサイトを作る30日チャレンジ】
スクロール率をJavaScriptで、なるべくレスポンシブに実装■ポイント ・通常スクロールバーの装飾に使用する::-webkit-scrollbarのwidthを0にし、非表示にする ・スクロールバーを非表示にしたところに、position: fixedさせた要素をおいて、そこにスクロールバーを表示させる ・keyframeを使用し、10秒で色のグラデーションを変化させます...
View Articleある条件に一致した時だけCSSで枠線を表示するにはoutlineを使うのがよさそう
ボタンにフォーカスしたときだけ枠線を表示したい状況があり、意気揚々と以下のような CSS を書いたところ、フォーカスしたときに枠線は表示されるものの、同時にボタンの表示位置がずれるという残念な結果になった。#target-button:focus{border:solid5pxred;}どうやら...
View Article初心者によるプログラミング学習ログ 358日目
100日チャレンジの358日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 358日目は、昨日の作業・やったこと⇩●ブログ1記事作成●kindle読書 20分ぐらい●プログラミング学習358日目 2.0h・架空LP...
View ArticleClik here to view.
【初心者でもわかる】横並びにする3つの方法を、ナイフとフォークでやってみる
どうも、7noteです。今回は要素を横並びにする３つの方法を説明。高級レストランのように綺麗にナイフとフォークを並べましょう。高級レストランとか、人生でまだいったことないけど、何となくナイフとフォークがナプキンの上にキレイに並んでるイメージがある。いつか高級レストランでプロポーズを・・・なんちゃって。完成図早速、まずは基本から！画像を並べる方法。①材料はこちら(1人前)ファイルCSSプロパティ意味i...
View ArticleClik here to view.
TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～CSS第7回～
アジェンダ背景を表示する背景の表示方法を指定する実践背景を表示するbackground-color背景の色を指定する。指定方法は以下の通りbackground-color: 色; 値は色(rgb()、16進数、色名)を指定する。background-image背景の画像を指定する。指定方法は以下の通り。background-image: url;...
View ArticleClik here to view.
模写コーディング その2 FaceBook ログイン画面
模写コーディング模写するサイトFaceBook ログイン画面https://www.facebook.com/作成時間その１：3時間その２：5時間半計：8時間半環境構築・Google Chrome（ブラウザ）・Visual Studio Code（コードエディター）模写する上でのルール（引用）1.文字のコピペはOK 2.フォントの種類は何でもOK 3.少しのズレはOK 4.背景画像も入れる...
View ArticleHTMLの「style」プロパティにJavaScriptでstyleを設定する
はじめにこの1つ前に投稿した複数の背景画像をCSSで設置すると少し関係します。背景画像を分割したいという相談を受けました。かつ、JavaScriptで実装する必要があるとの事でした。そんなわけでサンプルとして実装してみました。備忘を兼ねて投稿します。実装利用するものHTMLElement.styleプロパティを利用します。これはHTMLで、インラインでstyle属性を指定したのと同じ状態になります。...
View Articleheaderの画像を上下中央寄せする方法
まず、HTMLを記載するとこんな感じです。<divclass="p-header__logo"><imgsrc="img/header/logo/logo120.png"alt=""></div>.p-header__logo{height:90px;display:flex;align-items:center;&img{height:70px;disp...
View ArticleClik here to view.
HTMLとCSSの記述順序を意識することはデザイナーとの対話をなめらかにするという話
みなさんは記述順序を意識していますか？こんにちは。ひらやま（@rhirayamaaaan）です。さて、唐突ですが、Twitter でこんな質問をしてみました。ちょっと気になったんですが、モジュール単位（Organisms程度）のHTMLとCSSを書くときに、みなさんはどういう順序で書きますか…？— ひらやま (@rhirayamaaan) July 2, 2020※ 2020/07/03 12:00...
View ArticleClik here to view.
【Vue】漫画の進捗管理ツール作ってみた
あと何コマ？コマ数で漫画の進捗管理するツールを作りました。コマ数を入力するとコマが出てきて、終わったコマをクリックすると塗りつぶされて完了状態になります。 1コマ辺りの作業時間を入力すると、残りの作業時間がわかります。...
View ArticleClik here to view.
失敗しない【filter】エフェクト５３選
こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)プロジェクトに取り込んでより充実したデザインにしてもらえれば○＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ１. hoverで画像が拡大(ズーム)するCSSアニメーション３選(＋filterエフェクト)２....
View ArticleClik here to view.
差がつく画像アニメーションまとめ４９選
こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)プロジェクトに取り込んでより充実したデザインにしてもらえれば○＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ１. hoverで画像が拡大(ズーム)するCSSアニメーション３選(＋filterエフェクト)２....
View Article【一番簡単に】とりあえずCSSだけで要素を〇〇秒後に表示したい
Keyframesを使うKeyframesを使えば簡単にできます。Keyframesが分からなくても以下をコピペすればとりあえず動きます。<divclass="hoge-box"> 10秒後に表示されるBOX </div>/* 10秒後に0.5秒かけて"late-open"を実行する...
View ArticleClik here to view.
【コピペOK】hoverしたら動き出すCSSボタンアニメーション５１選
コピペだけで作れるボタンアニメーションを５１個を紹介いたします。box-shadow, filter, transformなどをふんだんに使っており、transitionで滑らかな動きが表されていますコードには説明もわかりやすく書いてあるのでかなり参考になりますWebデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっていますCSSボタンアニメーション５１選１....
View ArticleScrollReveal.jsでええ感じのパララックス効果を実装する
スクロールすると画像がふわって出てくる感じのを実装する簡単にパララックス効果を実装できる便利ライブラリをcdnで以下のようにheadタグに記述<script...
View Article初心者によるプログラミング学習ログ 359日目
100日チャレンジの359日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 359日目は、昨日の作業・やったこと⇩●読書 kindle 20分●ブログ記事1記事作成●プログラミング学習359日目...
View ArticleClik here to view.
JavascriptでiPhone風の電卓アプリを作ってみた
こんにちは、Mottyです。今回はJavascriptを使ってみました。概要今回はJavascriptの処女作で電卓アプリを作ってみました。定番ですが、HTML・JavascriptによるWebアプリ作品です。ソースコードCalculator.html<!DOCTYPE html><htmllang =...
View ArticleClik here to view.
【初心者向け】画像名の付け方わかるかな？（全5問）
どうも、7noteです。いきなりですが第一回コーダークイズ、はじめます！「画像名の付け方編」第一問ホームページ制作時、つけるならどっちの画像名が正しい？企業のロゴ画像の場合 A「ロゴ画像.jpg」 B「logo.jpg」10秒以内にお考えください！（チッチッチッチッチ…） ・ ・ ・ ・ ・ ・ ・...
View Article