株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
CSSもCSS3となって思っているよりも多くのことがCSSだけでできるようになり、JavaScriptの出番を極力減らせるようになってきましたね。
まぁ、できることが多くなった半面、学習コストはがっつりとアップしたのではありますが・・・。
そんな中でも手っ取り早く学習でき、かつ使える関数って、「calc()」という関数ではないでしょうかね？
まぁ、ざっくりというと、「calc()」はプロパティに設定する値を数式で計算することができるもので、さらには記述も簡単、わかりやすい便利なものなんです。
例えば、以下のような使い方ができるんです。
.box {
width: calc(100% - 50px);
}
これは、親要素の幅100%から「50px」を引いたサイズが「width」ですよという表現で、今どきのレスポンシブ対応のサイトではありがたい使い方ですよね。
上記のように、「calc()」は数値計算を行ってくれる関数で、数式として使用できる演算子は、＋ (足し算)、ー (引き算)、× (掛け算)、÷ (割り算) の4種類となっています。
気を付けておきたいのは、演算子の前後は必ず「スペース」が必要で、「スペース」を開けずに表記してしまうとエラーとなります。
計算できるからって、あまり便利になることはないんじゃないか？って思われた方もいるでしょうけど、これ、3つのボックスを横並べにしたいと思ったときに便利になるって思いませんか？
普通に横並びにしようとすると、おそらく以下のように表記していたとは思うのですが、
.box1,.box2 {
width: 33%;
}
.box3 {
width: 34%;
}
これを一気に、以下のように表現することができます。
.box1,.box2,.box3 {
width: calc(100% / 3);
}
ソースをシンプルにできるうえ、四則演算さえ知っていれば、パッと見るだけでどのような表示になるのかも理解しやすく、もっというと、box1,2,3なんてわけなくてもいいですよね。
まぁ、とにもかくにもCSS3の関数は覚えれば、超絶便利なものなので、新しいプロパティなどが増えすぎて諦めた人も、今一度、学習する価値は十分にありますよ！
ツイート
CSSフレームワークであるBULMAがいい。
このBULMAは文字通り「ブルマ」と呼ぶのですが、なにがいいってJavaScriptを必要としないうえに、最近の流行りである「Flexbox」を利用しているんです。
これだけでも十分すぎるのですが、このBULMA，シンプルかつ軽量でカスタマイズがしやすい！！！だけでなく・・・・用意されたCSSファイルを一つ、Webページに組み込むだけで手軽に使えるようになるんです！！！！
しかも、MITライセンスとなっていて、個人でも商用でもクライアントのプロジェクトでも無料！！！
まさに感謝感激、雨あられ！
これまでは最も軽量でシンプル、高速なフレームワークの1つであったSkeletonを気に入って使っていたのですが、今後はBULMAに乗り換えそうです。
使い方は、「NPMコマンドでインストール」「公式サイトからダウンロード」「CDNを利用」の三つが用意されているようで、「NPMコマンド」については、私の技量不足でなにがなんだかわからないのですが、1番楽なのが、やっぱり「CDN」。
なんて言ったって、HTMLファイルに以下の1行を追加するだけで利用できるんですから！！
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css" />
まさに神！！！
こんなふうにお手軽に、今風の技術が使えるなんて、なんて素敵な世の中なのでしょう！
ツイート
先日、GoogleのChromeブラウザーがFlashコンテンツをすべてデフォルトで無効化し、HTML5コンテンツを優先するということを発表しましたが、今度はMicrosoftのブラウザ開発チームが、HTML5をデフォルトとしたWebブラウジング環境にブラウザ「Microsoft Edge」を移行させていく計画を明らかにしました。
いまや、Flash Playerは頻繁に脆弱性が発見されているばかりか、エクスプロイトキットでもよく悪用されるなど、サイバー攻撃に悪用される代表的なソフトウェアになっているますので、これで、ようやくやっかいなプラグインから開放されそうです。
とはいえ、これまでのWEBの発展にはFlashも少なからず影響を与えつづけてきましたので、感謝の気持ちとともに、サヨナラを告げましょう。
なんといっても20年前の技術ですからね・・・
日進月歩のインターネットの世界で、よくここまで生き残ったものです。
まぁ、このインストールの際の、余計なオプションをインストールされるのも迷惑な話なんですけどね。
最初からチェックボックスにチェックが入っているなんてありえませんよ。
ツイート
