include と require は,エラー時の挙動が異なるようです.
require:致命的なエラー(Fatal)となり処理を停止
include:警告(Warning)となり処理は継続
include と require は,エラー時の挙動が異なるようです.
require:致命的なエラー(Fatal)となり処理を停止
include:警告(Warning)となり処理は継続
PHP 関連の解説記事などを読んでいて,用語の使い方で違和感を感じたので調べてみた.
個人的には,クォートとエスケープは異なるものと感じていたのに,解説記事などでは同意として使用されているようで,少し違和感を感じました.
上記,QAサイトに同じようなことを質問されている方がいました.
回答として,「クォートとエスケープは現状では同じ意味として使われています。
本来は、
クォート:「決まった文法の中で特別な意味を持った文字の特別な意味をなくしその文字そのものと扱いたい時に行うこと」
エスケープ:「文字に元の意味で無い別の意味を与えるときに行うこと」
と全く別なのですが。」
とのこと.
PHP 界隈では同義として語られることが多いのでしょう.たぶん.
他の言語経験者が PHP を学んでいて少し驚く点じゃないでしょうか?
PHP では,意味が違うようです.
‘(シングル クォーテーション) : 文字列中の変数を置換しない
“(ダブル クォーテーション) : 文字列中の変数を置換する
if ($var), isset, empty, is_null など,変数の値のセット状況を判定する方法がある.
それぞれの違いについて調べてみた.
参考: PHP isset, empty, is_null の違い早見表
「if ($var) / empty」と「isset / is_null」は判定結果が逆となっていますね.
設定済みの判定は,if (!empty($var)) がいいのかな?
Follow @redwing1300他のプログラミング経験者が PHP のコードを見て,「PHPってこうやるんだなぁー」と感じたところをメモしておきます.
list( $activate_path ) = explode( ‘?’, wp_unslash( $_SERVER[‘REQUEST_URI’] ) );
if ( file_exists( ABSPATH . ‘wp-config.php’ ) ) {
型演算子 instanceof を使用する.
version_compare( phpversion(), ‘7.0.16’, ‘>=’ )
require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
if ( ‘POST’ != $_SERVER[‘REQUEST_METHOD’] ) {
if ( 0 === strpos( $_SERVER[‘REQUEST_URI’], ‘http’ ) ) {
WordPress には,セキュリティーに配慮した,以下の記述のみの index.php が配置されているディレクトリがある.
1 2 | <?php // Silence is golden. |
1 2 3 4 5 6 | <?php if ( ! empty( $input_id ) ) : ?> <script type="text/javascript"> try{document.getElementById('<?php echo $input_id; ?>').focus();}catch(e){} if(typeof wpOnload=='function')wpOnload(); </script> <?php endif; ?> |
「PHP はエラー制御演算子(@)をサポートしています。PHP の式の前に付けた場合、 その式により生成されたエラーメッセージは無視されます。」
とのこと.あまり使用しない方が良い気がしますね.
参考: エラー制御演算子
if文などで,本来「{」があるべき箇所に「:」があったので調べてみた.
php では,コロン構文といい,HTMLタグとPHPの処理が混在する箇所で使用されているらしい.
判定処理が複数のタグに渡る場合などは使用せざるを得ないですね.
PHP の独自言語仕様と思える箇所もあるので,global キーワードなど最初にチェックしておいた方が良いと思います.
参考: PHP $GLOBALS(グローバル変数)のすべて!【初心者向け基本】
クラス外で定数を定義する場合,define,クラス内で定数を定義場合,const.という使い分けで良いと思います.
PEAR (PHP Extension and Application Repository) : PHPで記述されたPHP拡張ライブラリ
PECL (PHP Extension Community Library) : C言語で記述されたPHP拡張ライブラリ
VCS – Enable Version Control Integration …
処理時にアナライズ処理?が入るため,大量にコミットする場合は,SourceTree の方がいいかも?
参考: Gitリポジトリを設定する
参考: JetBrains IDE(IntelliJ IDEAなど)を使う時のgitignoreについて
設計手法については幾つかあるらしいですが,なんとなく主流は BEM と呼ばれるものらしい.
3つの要素を元に名前を設定する.
Block, Element, Modifier
Block__Element–Modifier
Block–Modifier
div タグの class 属性などは以下のように記述する.
class | セレクタの始まりを「.」にする |
id | セレクタの始まりを「#」にする |
以下の html と main.scss をビルドすると添付のような文字色で表示される.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./dist/css/main.css"> <title>Document</title> </head> <body> <p>赤い文字</p> <p class="green">緑文字</p> <p><span class="blue">青い文字</span></p> </body> </html> |
1 2 3 4 5 6 7 8 9 | /* main.scss */ p { color: red; &.green { color: green; } .blue { color: blue; } |
@mixin で定義して,@include で適用する.
変数の参照
参考:
今更ながらBEMについてと、それに対応するSassについてまとめてみる
BEMをSassで快適に書く方法
記法のことを指していることが多く,scss 記法が CSS に近いルールで記述できる.
主流はこちらになっている.
いまさらながらですが,ちゃんとHTML,CSS3とか見たことがなかったので,体系立てて少し見てみました.
用語,仕様が複雑ですね… ベンダープレフィックスとか…
1. テーブルレイアウト
2. float
3. Flexbox
4. Grid Layout
レイアウトには流行廃りがあって,上記のような感じらしい.
プログラマであれば,今後は bootstrap4 あたりをチェックすれば良いと思う.
でも結局なんとなく全部把握しておく必要があるかも…
参考: CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門
html 各要素のブラウザ毎に異なる差異をなくしてスタイルをリセットするスタイルシートを適用すれば良い.
sanitize.css
リセットCSS,ノーマライズCSS,サニタイズCSSなど初心者には区別が付けにくい言葉があったので,ついでに調べておく.
1 | <link href="css/base.css" rel="stylesheet" type="text/css"> |
より後から読み込まれたスタイルが適用される.
・要素の状態によって適用できるセレクタに擬似クラスがある.
・全ての要素に適用する「*」.
・擬似要素 :first-letter / :before / :after
参考: CSS 複数のセレクタを指定する/絞り込むサンプル
参考: CSSのセレクタとは?覚えておきたい25種類と書き方
参考: cssを書く人がブクマしておきたいジェネレーターサイト8選
margin プロパティなどの数字の指定方法は以下の通り.
1つ | 4辺とも同じ値 |
2つ | 上下,左右 |
3つ | 上,左右,下 |
4つ | 上,右,下,左 |
指定しない場合,デフォルトになる
参考: 余白については以下の記事が良かった.
1 2 3 4 5 |   ノーブレークスペース(前後で自動改行しないスペース) " " " クォーテーション(引用符) & & & アンパサンド < < < 小なり > > > 大なり |
&#以降はUnicodeのコード番号
css で以下のようにメディアクエリを記述し,スクリーンサイズで処理を分岐する.
1 2 3 4 5 6 7 8 | @media screen and (min-width:480px) { /* 画面サイズが480pxからはここを読み込む */ } @media screen and (min-width:768px) and ( max-width:1024px) { /* 画面サイズが768pxから1024pxまではここを読み込む */ } @media screen and (min-width:1024px) { /* 画面サイズが1024pxからはここを読み込む */ |
【概要】
Emmet とは HTML,CSS コーディングをサポートするプラグイン.
【使い方】
タグ入力後,「Tab」キーを押下
【例】
・ html の雛形を入力する
「!」入力後,「Tab」キーを押下
・ 「要素.class名」の指定
div.box と入力し,「Tab」キーを押下
1 | <div class="box"></div> |
・ 「>」でネストを指定
div>p と入力し,「Tab」キーを押下
1 2 3 | <div> <p></p> </div> |
参考: EMMETの使い方
command + shift + f
「ファイルまたはディレクトリのパターン」を指定しないと検索できないことに注意.
“atom-beautify”プラグインで整形することができる.
エディタ上で右クリック > Beautify editor contentsをクリック
ショートカットキーは,control + option + b(eautify)
“split-diff”プラグインを使用する.
Follow @redwing1300