Clik here to view.
【javascript】ページのスクロールで画像を入れ替えたい。
ポートフォリオサイトの制作中に使った画像の入れ替えについてざっくりまとめたのでご紹介。 ( 今回はhamlではなくhtmlそのまま使用しています)やりたい事以下のように、スクロール用によって画像をじんわり入れ替えたい。1. 使う画像を準備する今回は二枚の画像を入れ替えます。クラスとかwidthはなんでも構いません。sample.html~ 省略 ~...
View ArticleClik here to view.
Appleに似たページを作る【完成編】 ~1日10行コーディング~
13日目前回はある程度枠組み的には寄せることができたので、マージンの調整や色の調整などして完成させたいと思います！【技術テーマ】ホームページ制作言語HTMLCSS目標成果物AppleのMac紹介ページに近いものコードと資料前回のものをベースに要素の追加などをして完成を目指します。各要素の定義修正前回の要素に追加してランキング、動画へのボタンを追加します。index.html<body>&...
View Article初心者によるプログラミング学習ログ 347日目
100日チャレンジの347日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 347日目はおはようございます346日目 2.5h・前にやった課題サイトレイアウト見直し...
View ArticleClik here to view.
（海賊王編）スクロールするおしゃれなサイトを作ってみた7日目【WEBサイトを作る30日チャレンジ】
gsap timelineを使用し、文字や画像がアニメーションするサイトを作ってみた■必要なもの ・gsapのスクロールライブラリを使用（下記よりCDNにて取得します） https://greensock.com/st-get-started/下記のコードをheadに貼り付けてます<script...
View ArticleVueでの維持しやすいCSS
概要きっかけ／目標CSSの問題５つのルールまとめきっかけここ１年、毎日CSSを書いてきましたが、分かったことを伝える機会はなかなか来ないです。目標めったにフロントエンドに手を加えない方でも、維持しやすいCSSが書けるように。そして、これから発表する点について議論を始めたいです。前提Fire-and-forget（ファイア・アンド・フォーゲット？）ではないプロジェクトです。CSSの問題CSSは客観的に...
View ArticleCSS勉強メモ 属性の指定方法
<section id="about"> <h1 id="main" class="title box" style="color: skyblue;">Main</h1> </section> /* <h1>の指定方法 */ #about > #main.title{ color: pink;} h1 { color: red...
View ArticleBuefyでMaterial Design Iconsを使う
はじめにBuefyは、BulmaをベースにしたVue.js向けUIライブラリです。Buefyはアイコンを利用できるのですが、ドキュメントにはCDNからダウンロードする方法しか記載されていません。ここではnpm(or yarn)でinstallしたMaterial Design Iconsのアイコンを使うときの手順を紹介します。環境Node.js v12.13.1 vue-cli...
View ArticleClik here to view.
はてなブログのレイアウトを設定する方法
はてなブログにはデザイン用CSSを自作できる機能があります。しかし、はてなブログのCSSを初めて扱う人は、各クラス、IDがブログデザインのどこに影響を与えるかがよく分からないと思います。この記事では、ブログの「レイアウト」に焦点を当てて、どのクラス、IDを編集すべきか、私なりの回答を提示します。はてなブログのデザイン自作方法はてなブログには、ブログデザインのためのCSSを自由に記述できる場所が用意さ...
View ArticleSassの@useについて
@importがしぬらしくて@useに変えてみたはじめになぜこの記事を書いたかというとsassユーザーの大半はnode-sassユーザーなのでは…？と思ったからである。node-sassユーザー以外は見なくてもいいかもしれない。今年5月に@importが段階的につかえなくなるよと勧告されはじめました。https://sass-lang.com/blog/the-module-system-is-la...
View Article初心者によるプログラミング学習ログ 348日目
100日チャレンジの348日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 348日目は、おはようございます348日目...
View ArticleClik here to view.
【css】clip-pathに影をつける(出来なかった)
はじめにclip-pathで作った六角形に、六角形の影(外側)をつけたかった。けど出来なかった話。参考box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴Hexi-Flexi結論box-shadow、drop-shadow、擬似要素を使った影これらではダメだった。box-shadowhtml<divclass="hex...
View Articleiosでtextarea・input・selectタグ選択時に拡大するのを防ぐ方法
iosでtextarea・input・selectタグなどの入力フォームを選択すると拡大してしまうことがあります。デザインによっては拡大をさせたくない時もあると思いますので、その時の対策です。font-sizeを16px以上にするtextarea・input・selectタグのfont-sizeを16px以上にすればiosでも拡大しなくなります。input,textarea,select{font-...
View ArticleClik here to view.
qiitaなどに実装されているスマホ用検索ボックスをhtmlとcssだけで作る。
今回はqiitaのスマホ版に実装されているタップすると検索フィールドが出てくるやつを作ろうと思います。ハンバーガーメニューの作り方を応用して作りました。ハンバーガーメニューの作り方は以下を参考にしました。CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）完成図プチ宣伝公開日記というwebアプリを作りました。名前の通り毎日の日記を公開できるアプリです（公開しないことも可能）。現在利用者が自分...
View ArticleClik here to view.
position:relative な要素が overflow:auto領域にあるときスクロールバーが出る問題を解決する
解決したい課題あるdiv要素の上に、position:relativeな要素をオーバーレイ表示させたいとします。（例:...
View ArticleClik here to view.
TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～CSS第2回～
アジェンダCSSの書き方CSSにおけるブロック要素とインライン要素の違い親要素、子要素、兄弟関係CSSのセレクタ idセレクタclassセレクタ属性セレクタ擬似要素特殊なセレクタ実践 ブロック要素とインライン要素様々なセレクタ特殊なセレクタCSSの書き方CSSは「セレクタ」「プロパティ」「値」の三要素から成る。書き方は以下のとおり。セレクタ1, セレクタ2 { プロパティ1: 値; プロパティ2:...
View Article初心者によるプログラミング学習ログ 349日目
100日チャレンジの349日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 349日目は、おはようございます349日目...
View ArticleBootStrap5のα版がリリースされました
概要2020-06-16にBootstrap5のα版が公開されました！！Bootstrap 5 alpha! | Bootstrap Blog公式のブログを読むと、以下の対応が挙げられていました。jQueryを捨てたよIEサポートを捨てたよ公式ドキュメントを改善したよ...
View ArticleClik here to view.
MacOSでCyberduckをインストールし設定する手順
Cyberduckは制作したWebサイトのデータを、Webサーバーに公開する時に使用するFTPソフトです。それをMacOSにインストールし、使用できるまでの手順をまとめました。ちなみにCyberduckはWindows、MacOSのいずれの環境にもインストールできます。1....
View Article初心者によるプログラミング学習ログ 350日目
100日チャレンジの350日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 350日目は、おはようございます350日目...
View Article