[学習45日目]CSS ~display~
display:inlineを指定すると、文章の一部だけを指定できるどんな時に使うかというと、文章の一部で大事なところだけマーカーをつけたりできる方法はbackground:マーカーの色とすればできるinline-blockとすると、インライン部分の幅や高さを指定することができるlist-itemとすると、で囲んだ時と同じようになる...
View Article【CSS3】hoverしたら左から色を変更するアニメーション付きボタン
【CSS3】hoverしたら左から色を変更するアニメーション付きボタンhoverしたら空のspanタグが移動してくる動作でアニメーションを表現。※今回の記事はudemyの動画を参考に書き、備忘録的な動機で投稿しています。index.html<divid="container"><buttonclass="btn...
View ArticleClik here to view.
はてなブログにおいて，Markdown記法で書いた記事をCSSで２段組にする．
要約はてなブログ内でMarkdown記法中にCSSを用いて2段組にする方法を紹介する．この方法は現時点（2020年3月）では有効だが，今後，はてなブログの仕様変更で無効になる可能性が高い．より汎用性の高い方法として知られるMarkdown + CSSで作成した文章をhtmlに書き出す方法も，はてなブログ内では無効．はじめに...
View Article【CSS3】ローダーアニメーション
udemyの動画内容のメモ・備忘録index.html<divclass="three-dot-spinner"><divclass="bounce1"></div><divclass="bounce2"></div><divclass="bounce3"></div></div>style.scss$c...
View ArticleClik here to view.
Clik here to view.
WordPressテーマ作成法
はじめにWordPressのテーマ（テンプレート）作成方法について、ざっくりとまとめてみます。今後、随時追記予定です。最低限必要なファイル（ページ）WordPressのテーマを作るにあたり、最低限必要となるのは以下のファイルです。index.phpstyle.cssなお、style.cssには、以下の情報を記入します。style.css/* Theme name: テーマの名称 Theme URI:...
View Article【CSS3】ローダーアニメーション2
udemy動画内容の備忘録・メモです５つの縦線を設置し、それぞれに遅延時間を設ける。timing-iteration-count:...
View Articleポエム
私たちいつも 心をdisplay: inline;したりfloat: left;したりして 寄り添ってたいつかは必ず paddingされるって知っててもそれでもずっと negative margin近づきたくてあなたが書いたまま 忘れて行った<!--コメントアウト-->今でもそのまま divを囲っているけれどあなたになら -webkit-radius効くと思ってた独りよがりの...
View Article【CSS】animation付きハンバーガーアイコン(🈪→×)の作り方
※udemy動画内容の備忘録です。index.html<buttonclass="mobile-menu-icon"onclick="document.querySelector('body').classList.toggle('menu-open');"><span></span><span></span><span><...
View ArticleClik here to view.
ヘッダーメニューを横並びにする方法
Webサイトを作る度に調べては忘れ、毎度毎度一から調べ直していたので自分用の備忘録として。↑こんな感じのヘッダーにするHTMLtest.html<header><navid="list"><ulid="means"><ahref="index.html"target="blank"><liid="home"class="content">H...
View Article【CSS】文字のアニメーション
udemy動画内容の備忘録です。左から順に文字が表示されるようなアニメーションです。 - timing-functionでそれぞれの文字のアニメーション発動をずらします。 - 別ファイルである_mixin.scssを@importを使って呼び出します。index.html<divid="container"><divclass="animate-title...
View Article初心者によるプログラミング学習ログ 260~262日目
100日チャレンジの260~262日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。...
View Article僕のCSS
自分用の備忘録基本の形@charset"UTF-8";セレクタ{プロパティ:値}セレクタ別指定の仕方要素名{}.class名{}#id名{}セレクタ1>セレクタ2{}/*子セレクタ*/セレクタ1セレクタ2{}/*子孫セレクタ*/セレクタ1,セレクタ2{}/*複数の要素に*/セレクタの優先順位1:!important 2:タグのstyle属性 3:idセレクタ 4:classセレクタ...
View ArticleClik here to view.
Makrdownの表内フォントサイズを変更する方法
Markdownで、表内のフォントサイズを変更する方法を調べたので備忘録として。<style> table, th, td { font-size: 50%; } </style>...
View Article20 CSS Color Palettes for Web Developers
Color is an essential part of design. And choosing the perfect color scheme is a step all web designers, must go through. Below are 20 CSS Color Palettes for Web Developers.1.GRADIENTS COLLECTION...
View ArticleClik here to view.
ヘッダーメニューを横並びにする方法
Webサイトを作る度に調べては忘れ、毎度毎度一から調べ直していたので自分用の備忘録として。↑こんな感じのヘッダーにするHTMLtest.html<header><navid="list"><ulid="means"><ahref="index.html"target="blank"><liid="home"class="content">H...
View Article画面外の色を黒くしたい！（CSS）
個人アプリでシックな高級感のある感じを出したいと思い、黒基調の動画サイトを作成しています。デフォルトだと画面外にスクロールすると端が白くなってしまいますが、下記を追加するだけで他の色に簡単に変えられます！○○.csshtml{background-color:black;}簡単ですね（笑）是非試してみてください。
View Article