初心者によるプログラミング学習ログ 249日目
100日チャレンジの249日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。...
View ArticleClik here to view.
n番目のスタイルを変えたい時に便利な疑似クラスnth-child
nth-childとはある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを当てることができる！擬似クラス :nth-child()の使い方まとめnth-child(n) n番目 nth-child(３n) ３の倍数 nth-child(３n-1) ３の倍数-1番目に適用 nth-child(n-４) ４番目以降に適用 nth-child(even)，...
View ArticleClik here to view.
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts）
はじめにHTML+CSSコーディング専用の粒度分類を紹介します。この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト…...
View ArticleTop 30+ CSS & CSS3 Interview Questions and Answers 2020
Mostly asked CSS & CSS3 Interview Questions with Answers in 2020. Reading these questions once will give you a ton of confidence, and you will be ready to move out for an interview. Let’s...
View ArticleClik here to view.
CSSで２カラムの料金表をつくる時のテクニック
やりたいことPCでは２〜３カラム、SPでは1カラムの料金表にしたいイメージ出来上がったコード表組みだとやりたいイメージを実現できないので、リストで書きます。index.html<ulclass="price_list"><li><strong>本日のおすすめラム料理</strong>2000円</li><li><stron...
View ArticleClik here to view.
CSSのbox-shadowプロパティのプレイグラウンドを作ってみた
動作ページhttps://playcss.dev/box-shadowカンマ区切りで複数の影を追加できるので、「add shadow」ボタンで複数の値を追加できるようにした。実装縦に長くなるので、縮められるようにしてみた、...
View Article初心者によるプログラミング学習ログ 250日目
100日チャレンジの250日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。250日目は、おはようございます250日目・webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode—...
View ArticleClik here to view.
続編：Javascriptでテキストを自動で円形にする
はじめにこの記事は別記事「HTMLとCSSで魔法陣を描いてみる」の続編です。続編みたいなものです。自動化したので、長いテキストでも円形にできるようになった。サンプル See the Pen OJVmLOd by Yomogenium (@yomogenium) on CodePen. コードhtml<style>/* cssはなくても大丈夫だが、つけないとほぼ確実に見た目が悪くなる。...
View Article背景画像のFade-in表示
CSSで背景画像をフェードイン／フェードアウトで画像を切り替えるサンプルを掲載しています。当ページでは、フェードイン／フェードアウトの速度や動き（遠近/近遠）や表示切り替えの速度などを自由に指定しながら実際のデザインを確認することが出来ます。生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。いろいろフェードインを試してみよう表示時間と変化の大きさ...
View Article文系ガチの未経験だった僕が自力4ヶ月弱で自社開発のweb系会社で新卒内定をもらうために行ったこと
誰に読んで欲しいか・文系新卒未経験の方・web系の会社で働きたい方・フリーランスでアソビタィ！！偉そうに書きますがご容赦ください><なぜ書くのか実際に自分がエンジニアになりたいと思った時に情報が全くなかったから。何をしなければいけないかが全くわからなかった。web系で就職した人や未経験理系卒の方の情報は多少あれど文系未経験新卒でweb系エンジニアになった人の情報は全くなかったため。しかし...
View ArticleSassとStylusについて
業務でStylusを使用することになったので、Stylusの書き方について、まとめてみました。CSSの問題点CSSは、HTMLでマークアップしたものを飾り付けることで、より意味を持たせるためのスタイル言語です。これにより、PCの画面をHTMLだけのものに比較して様々な表現をすることが可能となりますが、CSSでは{}が必要だったりセミコロンが必要だったりと、多くの制約があることが事実としてあります。そ...
View ArticleClik here to view.
文字のアウトラインだけ色が変化するCSSアニメーション
やりたいことテキストのアウトラインだけ色が変化するようにしたいテキストは決め打ちではなく、自由に変えられるイメージこのカラフルな部分がグラデアニメーションする感じです。出来上がったコードindex.html<pclass="txt-outline">TEXT...
View Article【Ruby on Rails 5】Instagram風簡易SNSアプリを作ってみよう！（Techpit教材）を終えて
Techpitの【Ruby on Rails 5】教材の感想TechCommitさんのお年玉企画にて頂いたTechpit教材を使って、Ruby on Rails...
View Article初心者によるプログラミング学習ログ 251日目
100日チャレンジの251日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。251日目は、おはようございます251日目・webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode—...
View ArticleClik here to view.
HTML CSS フレックスボックスレイアウト(display: flex;)を使って header, footer を作ってみる（最小？）サンプルコード
HTML CSS フレックスボックスレウアウト(display: flex;)を使って header, footer を作ってみる（最小？）サンプルコードみなさまこんにちは、ハーツテクノロジーの山崎です。HTML...
View ArticleClik here to view.
オーガナイズドなCSSとミニマルなJSで実装する三枚綴りページ
テーマ 「DHTMLを極める為にJSを極める」という考え方はもう古いという事に最近気がついた。時代のニーズのトレンドは「周到なCSSを如何に練り上げ、JSやPHPにどれだけしょうもないことをさせるか」ではないか。例えば↓↓↓こんな風に。やりたいことhtml1ページに3枚のページを重ねて表示する。 1枚目を中央に配置し、2枚目を右下、3枚目を左上にずらす。...
View ArticleClik here to view.
Twitter のアイコンを丸角四角に戻す方法
経緯Twitterのアイコンが丸くなってからもう２年半。 「今では例えばアイコンが円いことに誰も違和を抱かないな」という主張を見かけるが、残念ながら私はまだ違和感を覚える。というのも、元々丸いアイコン前提のデザインなら良いが、明らかに四角前提のアイコンもあって違和感でしかない。自分のアイコンも四角なデザインで、この Qiita の表示通り。 Twitter...
View Article５つのプログラミング言語のまとめ
これから学ぶ５つのプログラミング言語について、概要をまとめます。HTMLHTML（HyperText Markup Language）ウェブページを作成するために開発された言語で、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されている。...
View ArticleClik here to view.
isara 模写
どうしても、「isara 受講生への参加特典」の「isaraは『実質０円』！更なる特典もあります。」と四角の白ボーダーとの重なりが表現できません。どうすればいいでしょうか。
View Article