本日で基本文法編がひとまず終了のようです。 さっそくやっていきましょう。 条件式を使いこなす 条件式と言えば…。 そう、「IF」ですね。 もちろん、PHPでもif文はあります。 まずは書き方 if( 条件 ){ ～実行される処理（※ただし、「条件」が「真」の時だ…

昨日からPHPの学習に突入しました。 ということで、本日もやっていきましょう。 変数について デイトラでは「データに名前をつける行為」と紹介されています。 ラベルが貼られた「箱」に「データ」を入れて管理する仕組みのようなもの。 ダンボールにりんご…

今日は初めて見る「PHP」についてやっていきます。 そもそもPHPって何？ プログラム言語の１つで、WordPressを作っている言語。 WordPressを扱うためにPHPの理解が必須ということです。 なぜWordPressを扱うのか…。 世界の3割のページはWordPressでできてい…

モーダルを作る。 これは以前の課題でも出てきたような・・・。 過去、28～29回目くらいの記事でクリックされた画像を拡大表示するやつを作っていましたね。 今回はリンクをクリックしたら最前面に表示される画面です。 とは言え、一度作ったものの応用なの…

今日はアコーディオンについて。 特に相対的な要素の指定方法を初めて知ったので そこはガッツリ確認したいと思います。 アコーディオンって？ 楽器…ではありません。 ただ、アコーディオンは開いたり閉じたりしながら音を出しますよね。 それが由来のようで…

ページ内リンクをクリックした時に、下線を引く。 目にしたことはあるけれど、イマイチどうやって作ればいいのかイメージが湧かない。 要領がわかれば難しいことは無いです。 では早速やっていきましょう。 何を使って実現するのか 今回はHTML、CSS、jQuery(…

今日はスクロールを検知して、要素を表示する。 そんな動きを作っていきましょう。 どうやって作るの？ ざっくり今回の流れは、 jQueryでスクロールを検出 トップからのピクセル数を条件に 指定したクラスの要素を表示・非表示 これで行きましょう。 jQuery…

本日はスムーススクロールを作ります。 待ったなしで早速やっていきましょう。 時間が押しているので（汗 スムーススクロールとは Webページのリンクやボタンをクリックした時に シューッと目的の箇所まで移動するアニメーションに出会ったことがあるハズ。 …

先日、課題の中でJavaScriptを使って動きをつける中で、 「データ属性を使う方法もある」と紹介がありました。 そして、ライブラリにも「データ属性」を使っているものが見られました。 これはちょっと、しっかり整理しておかないと…ということで 早速やって…

本日はドロワーメニューを作っていきます。 本当はデータ属性について考えていたんですが、 ドロワーメニューは ハンバーガーアイコン等をクリックすると「にゅるっ」と出てくるあれです。 スマホ表示など表示領域が狭い時などに重宝します。 こんな感じのや…

昨日に引き続きJavaScriptライブラリを使って、スクロールしてきた時に要素にアニメーションをつけます。 今回使うのは「WOW.js」 商用利用無料のMIT版を使用します。 MIT版とは 「ライセンスの表記をコード内に記述しておく等のルールを守れば、使用に制限…

さあ、やってきました。 久しぶりのJavaScript。 JavaScriptって、なんだ？という方はこちら。 manablo.hatenablog.jp ではスライダー作成、やっていきましょう。 スライダーって何？ 言葉から予想できるかもしれませんが、 画像を複数枚配置して、時間でス…

自分でコーディングをした後、正しいかどうかチェックする。 特に自分で書いたものは、どうしても正しいと思い込んでしまいますよね。 主観にとらわれず、チェックするにはどうしたら良いのでしょうか。 それではやっていきましょう。 チェックするポイント …

フォントファミリーって何となく決めていませんか？ 私は最初に教わったフォントファミリーを後生大事に温めていた口です。 でも、それも今回でおさらば。 何故、そうやって指定しているのかを知れば 自分で決めることができるようになります。 本日はWebフ…

今日はCSSで動きをつけるtransitionについて、まとめていきます。 CSSで動きをつけるってどういうこと？ 早速やっていきましょう。 transitionプロパティとは そもそも「transition」ってどんな意味なんでしょうか。 調べると「遷移」とか「移り変わり」とか…

思い通りにCSSが適用されない！ 学び始めた頃よりは回数が減りましたが、それでもまだま出会います。 そんな失敗談を集めれば誰かのつまづき改善になるのでは？ と思い記事にすることに。 一応、CSSの書き方だけ最初におさらいして、この後の記事内で使う 言…

上下中央に配置したい。 コーディングをしていると、中央揃えしたい場面に良く出くわします。 今回は上下中央配置するやり方を確認していきます。 上下中央？簡単でしょ？ ホントにそうでしょうか？ margin : 0 auto;やtext-align : centerは左右中央にはし…

え、疑似クラスと疑似要素違うの？ 擬似クラスを調べた時に初めて知りました。 擬似クラスは、指定した要素の状態に対してスタイルを適用するもの。 それに対して、疑似要素はどんなものでしょうか。 では、早速やっていきましょう。 疑似要素とは 「指定し…

CSSのショートハンド使いこなしてますか？ 私はイマイチ覚えきれていません。 読むのにも、書くのにも ある程度知らないと「この指定なんだっけ？」となってしまいます。 今回は頻出のものを中心に、自分で使えることを目標にやっていきます。 ショートハン…

本日は位置疑似クラスについて。 では早速やっていきましょう。 位置疑似クラスって？ 主にリンク（href属性）と、hrefで設定された要素に対して様々なスタイルを適用できるクラスです。 参考ページのリンクは下記に 擬似クラス - CSS: カスケーディン…

予想外に数が多いことが判明し、このシリーズを続けようか悩まされます。 とはいえ、よく使うものとその周辺（仲間）については調べたいので、 ひとまず進めていきます。 本日はツリー構造疑似クラスについて。 では早速やっていきましょう。 ツリー構造疑似…

CSSの擬似クラスってご存知ですか。 私は「使っているが、名前は抜け落ちている」そんな状態です。 「これ、そういう名前だったのね。」という感じです。 まず、擬似クラスについて概要を確認して、 それから各疑似クラスを見ていこうと思います。 それでは…

backgroundプロパティ使いこなしています。 って言ってみたいですね。 昨日に引き続き、やっていきます。 昨日の記事は以下から 47.実は色々出来る。backgroundプロパティ ～多様な背景指定でデザインの幅を広げる～ - web制作のしおり 各プロパティを確認す…

何気なく使っているbackgroundプロパティ。 実は一括指定のプロパティで、私は普段 background-colorやbackground-imageぐらいしか使用していませんでした。 今回はその他にどのようなプロパティがあるのかや、新しく得た知識などをアウトプットしていきます…

昨日やりたかったpositionプロパティについて 試しながら整理してみました。 では、さっそくやっていきましょう。 positionプロパティとは 一言でいえば、「要素を望んだ場所に配置する」プロパティです。 通常の配置では、 要素同士を重ねる 並び順を無視し…

フレックスボックスを使うようになって、あまりfloatにお世話になる機会が減りました。 ただ、positionプロパティを指定したり、floatプロパティを指定した時の要素の挙動について、よくわかってないなと感じることがありました。 ですので、今一度確認して…

本日はflex-basisについて掘り下げて行きたいと思います。 昨日までのフレックスアイテムのプロパティに関する記事はこちら 42.フレックスアイテムを知る ～ボックスとは違うアイテムのプロパティ～ - web制作のしおり 43.フレックスアイテムを知る② ～flex-…

昨日に引き続き、本日もフレックスアイテムのプロパティについてまとめて行きたいと思います。 因みに昨日の記事は以下 42.フレックスアイテムを知る ～ボックスとは違うアイテムのプロパティ～ - web制作のしおり では早速やっていきましょう。 アイテムの…

フレックスボックスに対して設定するプロパティを昨日までまとめてきました。 本日からフレックスボックスの子要素、「フレックスアイテム」に対して設定するプロパティについてまとめていきます。 フレックスボックス内の子要素をフレックスアイテムといい…

さてさて、昨日に引き続きフレックスボックスをまとめていきます。 本日の内容でフレックスボックスが半分、一段落といった所でしょうか。 参考までに前日までのリンクを貼っておきます。 39.フレックスボックスを使う ～レイアウトの大きな手助け～ - web制…