初心者によるプログラミング学習ログ 364日目
100日チャレンジの364日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 364日目は、おはようございます昨日の作業・やったこと⇩●寝る直前の筋トレ5分●ブログ記事1記事作成●プログラミング学習364日目...
View ArticleClik here to view.
リンクに飛べるのをわかりやすくする方法
プログラミングの勉強日記2020年7月8日 Progate Lv.148目的 こちらの記事で画像にリンクを貼る方法やCSSでリンクデザインを変更する方法を説明しているので、こちらも読んでみてください。...
View Articletransitionの復習（100 days of code）
はじめに100 days of code４日目。今日はcssのtransitionについて勉強したので復習としてまとめました。 Web制作やる人は押さえておきたいプロパティです。transitionの例transitionの使い方は以下のようになります。（一例）// transitionは1行でまとめると、 transition: all 1s ease 2s; //...
View ArticleClik here to view.
よくあるヘッダーレイアウト ~FlexBox~
FlexBoxを使うとWEBデザインでよくあるレイアウトを簡単にコーディングすることができます。<div class="flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> .flex {...
View Article吉野家1000円ガチャをJavaScriptで作ってみた．
超初心者プログラマーの平岡です(本当です)．ネットではAKRという名前をよく使っていて，本業は予備校講師で，おいしい数学という，月間10万PV程の高校数学のサイトを運営しています．さて，Twitter上で，サイゼリア1000円ガチャというサイトが流れてきて，これならプログラミング勉強中(JavaScriptを勉強して半年)の私でも作れるのではないか？？と思い，思いきって大好きな吉野家バージョンをネイ...
View Article【EMMET 記法】 基本 よく使うやつ エメット記法 まとめ
【メリット】■ コーディングが早くなります。■ ミスが少なくなります。【開発環境】■ Mac OS catalina■ VS...
View Article初心者によるプログラミング学習ログ 365日目
100日チャレンジの365日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 365日目はおはようございます昨日の作業・やったこと⇩●寝る直前の筋トレ5分●ブログ記事1記事作成●プログラミング学習365日目...
View ArticleClik here to view.
【初心者でもわかる】デザインからコーディングする時の考え方（実践例あり）
どうも、7noteです。今回はデザインからコーディングに写すときのコーダーの頭の中を解説。ところで「YOASOBI...
View ArticleClik here to view.
Ionic 特定のページの背景色を変更する方法（ion-contentの色）
ion-contentの背景色の変更、Ionic初心者は恐らくこうやっている。home.page.html<ion-header><ion-toolbarcolor="secondary"><ion-title>ホーム...
View ArticleClik here to view.
色々なCSSアニメーションつくってみた 10日目【WEBサイトを作る30日チャレンジ】
CSSだけでアニメーションを作る（trasition及び@keyframeを使用） ・hoverした際に動くアニメーションとしました ・アニメーション以外は前回作ったシャーロックホームズのテンプレを一部利用しています ・画像はフリーのものを使用しましたお世話になったサイト様@7968様 @keyframeとanimation@7968様 trasition関連完成物コード<!DOCTYPE...
View ArticleClik here to view.
【flex-box】 html css フレキシブル対応 レイアウト 基本
【ゴール】flex-box忘れていたので、振り返り【コード】何はともあれ、「display: flex;」を親要素に指定flex-wrap:...
View Article初心者によるプログラミング学習ログ 366日目
100日チャレンジの366日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 366日目は、おはようございます昨日の作業・やったこと⇩●ブログ記事1記事作成●プログラミング学習366日目...
View ArticleClik here to view.
Nuxt.js(Vue.js)でボタンコンポーネントを作る
はじめにVisual Studio Code で Nuxt.js を使った Docker コンテナ内での開発作成した環境でボタンコンポーネントを作ってみます。差分が確認できるように GitHub の差分ページのリンクを載せていきます。仕様色、左右マーク、ボタン文字をプロパティで指定できるようにする。コンポーネントファイルを作成components/MyButton.vue...
View ArticleClik here to view.
【初心者でもわかる】html・cssで作る、簡単な三角形の作り方3選。
どうも、7noteです。今回はhtml・cssで吹き出しの三角形を作る3つの方法を解説していきます。WEBサイトを作成する時、こんなデザインがよく見られます。吹き出し風のデザインのこんな三角形はよくでてきます。毎回出るのでその度適切な作り方を使い分けて綺麗なコーディングを意識しましょう！方法1:...
View ArticleClik here to view.
Chrome Extentions "Krafty" 公開
Chrome Extention "Krafty"を公開しました。開いているWebページのmeta情報やaltの確認、HTMLのネストの検証、要素のアウトラインの確認などができます。マークアップエンジニアの方や、ディレクターの方には便利につかっていただけると思います。名前は、New...
View ArticleClik here to view.
HTML,CSSだけでホームページ作成『開発環境編』「前編」
はじめにHTMLとCSSでホームページを作成するためにはエディタブラウザこの2つが必要になってきます。グラフを見て分かるようにエンジニアの3人に1人がVisual Studio Codeを使用していることになります。なので、今回はVisual Studio...
View Articleカブトムシを様々な種類にトランスフォームさせたくなったときの簡単なTIPS
【 完成形 】 See the Pen MWKXrmO by daisukeibi (@daisukeibi) on CodePen. まず初めにGSAPのライブラリを読み込む。index.html<script...
View Articlecssのdisplayモデルのdivとspanの違い
displayプロパティの理解div→横いっぱいに変更される。下記はブロックレベル要素になる。・h1~h4・section・pspan→開業されないため横に並ぶ。下記はインラインレベル要素になる。・a・img See the Pen zYraRgr by daiki-6cats (@daiki-6cats) on CodePen.
View ArticleClik here to view.
Clik here to view.
一つ目のサービスを作ってから、感じたこと/サービスを作りなおした話
1カ月前に「みんなでコードレビュー」というサービスを作りました～～■参考記事https://qiita.com/shibaHaya/items/734d5e2cd22f7e7d9576このサービスは、自分のコードをレビューしてもらったり、軽い感じでレビューするサービスを想定して作ってみたものでした経過...
View Article