CSS SVGとCSSでアニメーションに挑戦
svgファイルを使って、アニメーションが作れる。
See the Pen
bike-boy svg animetion by aiworldexplore (@aiworldexplore)
on CodePen.
このア...
コーディング
CSS CSS CSS/ flex-box/ flex-growの使い方
今回は、flex-growについて。
CSS 【CSS/flexbox】orderで特定のアイテムの順番を変更
デフォルトだと始めに書かれたアイテムから順に並ぶが、特定のアイテムだけ前に移動させたい場合。
CSS 【CSS/flexbox】align-selfの使い方
全てのアイテムを整列させる方法を前回紹介しましたが、今回はクラスを使ってアイテムを特定して、その特定されたアイテムだけ整列を変更する。
4番目のアイテムにi4のクラスを与えて、
.i4 {}
の中にalign-self: ...
CSS 【CSS】flexbox/ align-itemsの使い方・整列方法
align-items
align-items: center; / 軸は真ん中に整列される
分かりやすいように、2番目のアイテムにはクラスを追加して(i2)、他のアイテムより高く(height: 100px;)した。
See...
CSS 【CSS】flexboxとは/ flex-directionとjustify-content
flexboxの素晴らしいポイント
flexboxは、CSS3の新しいモジュール。エレメントを並べる時に、非常に簡単にでき、方向を変えたりするのも楽。
flexboxが発明された主な理由は、コンテナを作ることによって、エ...
php 【php】簡単な計算式を作ってみる
phpで簡単な計算式を作ってみる。
コード
htmlの中にstep="0.1"を入れる事で、小数点も加えられるようになる。もちろん、0.0000001なども可能。
数式で使うもの
+ 足し算
- 引き算
* 掛け...
php php trueとfalse 2つのデータを入れる
↑今回使うコード。
$isMale
$isTall
この二つのデータを、それぞれtrueの時とfalseの時、4パターンに分けられる。
2つともtrueの時
MaleでTallの時は、２つともtrueに...
php PHPのメモ
phpを使って足し算をする
See the Pen 足し算php by aiworldexplore (@aiworldexplore) on CodePen.
phpのGETを使って文字を入れてみる
...
php 【ワードプレステーマ】register_post_typeを使って新しいポストタイプを作成～新しいページテンプレートを作成
今回編集するのは、register_post_type
新しいページタイプを作る
アイコンを変える
好きなアイコンをここから選べる。
出てきたコードをコピーして、
'menu_icon' => '...
php 【ワードプレステーマ作り】サイドバーを入れる
ファイル：function.php
の中に
See the Pen OJVWeYg by ai-nishino (@aiindigo2) on CodePen.
ワードプレス上にサイドバーが表示された。
...
php ワードプレスのアチーブページ01
See the Pen
wordpress archive.php previous, next by ai-nishino (@aiindigo2)
on CodePen.
この
<?php pre...
CSS テキストを選択した時の色を変える方法/html, CSS
何も指定しないと、テキストを選んだ時のデフォルトカラーは青い（firefoxとChromeは少なくとも確認済）。これを、変えてみる。
コードを入れる前
コードを入れる前は、↑このような画面になっている。そして、使うコー...
CSS 画像をレスポンシブにする方法/表示する画面サイズによってサイズを変える
3つ画像が並んだデザイン。
この画像を、レスポンシブにする。
htmlコードはこちら
img srcsetタグ
この
<img srcset="img/nat-1.jpg 300w,...
CSS デバイスの大きさに合わせて画像自体のサイズをレスポンシブにする方法
画像自体をレスポンシブにする方法を説明。
なぜ画像をレスポンシブにする必要があるのか？
理由：大きな画面で最適なサイズでも、小さなデバイスになると同じ画像サイズだと重たくなってしまい、読み込みが遅くなる原因になる。
...
CSS あなたのコードが、どのブラウザでサポートされているかorいないか調べる簡単な方法
コードを書いていても、あるブラウザはサポートされていて、あるブラウザではサポートされてないことがある。
簡単な調べ方は、
Can I use.comを使う
リンク：
ここに問題になっているコードを入れて確かめる...