カテゴリー: コーディング

WordPressで活躍するプロパティ

WordPressなどの、ブログ構築サイトなどで、多くのウィジェットを使ったサイト構築を行うことがあります。
そんな時に役に立つのが、containプロパティです。

なぜこのプロパティが役に立つかといいますと、コンテンツや指定されたDOM要素が、ドキュメントツリーの他の場所と独立していることを ブラウザに知らせます。
要するに、containプロパティによって、Webコンポーネント・Reactコンポーネントをたくさん組み込むことで、独立したウィジェットの高さや横幅を、他のDOM要素に影響させずに変更したりすることができます。

プロパティの値には、none、size、layout、style、paint、strict、contentがあります。

マイナーだけど便利なCSSプロパティ

今回はあまり有名ではありませんが、知っておくと便利なcssプロパティについて紹介をしていきたいともいます。

紹介するのが、font-displayです。

font-displayというプロパティは、Webフォントがブラウザ上で読み込まれる前にどのように処理するかや、読み込みが失敗してしまったときの動作を指定する CSSプロパティです。

ウェブフォントが読み込まれるまで、 なかなか画面が表示されないことがあります。
ページの読み込み速度が遅ければ、 ユーザーはページから離れてしまうため、ユーザビリティが低下してしまいます。

テキストが表示される時間は ブラウザにもよりますが、およそ2秒程度です。
2秒は短い時間かもしれませんが、Webを閲覧している ユーザーにとっては極めて長く感じてしまうものです。

このプロパティには、次の5つの値が用意されています。
auto、block、swap、fallback、optional

特に、swapでは、フォントが読み込まれる間に代替フォントが表示されるので、お勧めです。

WEBサイトを制作する時に、便利なサービスを活用するととっても役に立つサイトを紹介します。
今回は画像圧縮のツールを紹介したいと思います。

画像を軽くするのは、読み込み速度を早くするだけでなく、ユーザビリティも向上するので、積極的に行っていきたいですね。

そこで紹介するのは、画像関連のツールで、画像の圧縮をしてくれる「TinyPNG」です。

ドラッグとドロップするだけで一度に20枚の画像ファイルを圧縮してzipでダウンロードできます。
１つのファイルのサイズは最大5MBまでのようです。
PNGだけでなく、JPGも対応してくれています。

https://tinypng.com/

Chromeには4つのバージョンが存在しています。

Chromeは安定版、開発版、Canary版の3つがあります。開発版には「dev」、Canaryには「canary」がバージョンにつきます。

Chrome Canaryだけが、安定版であるChromeと同じPCにインストールできるようになっております。
なので、開発時のチェックとして使えます(最新のブラウザでWebページがきちんと動作するか、同時にスマホとパソコンの見た目を見たりすることができます）

本実装はされていませんが、検証に利用できる、試験運用的な機能がたくさんあります。
これらの機能は、本機能として実装される可能性もありますが、機能自体が消去されたりします。

検証に便利ではありますが、高確率でバグに遭遇したりすることがあり、描画がうまく表示されないことや、画面が落ちたりなど)。ですが、最新のバージョンで改良されたエンジンや、最新のデザイン、それに最先端のWebのAPIを体感できます。

CSS3をweb制作に取り入れたくても、cssを書くのが難しいと感じるときもあるのではないでしょうか。
そんな場合はCSS3ジェネレーターを利用してみてはどうでしょうか？

視覚的にcssを確認できるので、自分の行いたい調節も簡単にできます。
自分の作りたいデザインを作成して、コピー＆ペーストでスタイルシートに貼るだけです。
ジェネレーターを使って、CSS3で制作してみてください。

CSS3 Generator

多くのCSS3のスタイルを作成できます。
数値を指定していくだけで作成できるジェネレーターです。
css3のスタイルのborder-radius, box-shadow, text-shadow, RGBA, @font face, multiple columns, resize, box-sizing, outline, transition, transformを生成できます。

ウェブサイトでも多くのフォントが使われており、画像に使用されているフォントが知りたい時があります。
そんな時「WhatTheFont」というサイトがあります。

1.フォントの画像ファイルをサイトにアップロードする
2.「Continue」を選択して解析

上記の流れだけで、フォントの種類を判別してくれるので、とても便利ですね。

使い方は
「WhatTheFont」にアクセスして調べたい画像を選択し、「Continue」を押すと、アップロードされます。
次の画面で画像にしようされている文字を認識し、テキストで表示されます。

入力が終われば、Continueボタンを押して、次の画面で文字フォント候補が複数表示されます。

WPでカテゴリ一覧表示する

カテゴリ一覧表示をしたい時のPHPコードを記述します。
<?php
$categories = get_categories();
foreach($categories as $category) :
?>
<div><a href=”<?php echo get_category_link( $category->term_id ); ?>”><?php echo $category->cat_name; ?></a></div>
<ul>
<?php
query_posts(‘cat=’.$category->cat_ID);
if (have_posts()) : while (have_posts()) : the_post();
?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>
<?php endforeach; ?>

「get_categories();」は全カテゴリの情報を取得して「foreach」で出力しています。
「query_posts(‘cat=’.$category->cat_ID);」はループ中でカテゴリのIDをクエリに設定して、そのIDのカテゴリに属する記事を出力します。

グリッドレイアウトのコードを作成できるサイト

グリッドレイアウトを制作するのにあたり、コードを作成してくれるWebサイトがあったので紹介します。
「Griddy」のサイトにアクセスすると、4つのグリッドが表示されおり、グリッドの数を作成したり減らしたりするには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンでグリッド数を変更します。

設定した、グリッドレイアウトのコードは画面右下に表示されているので、コードを親要素に指定すれば完成です。

「Griddy」では基礎となるグリッドレイアウトを組むことができますが、ボックスのサイズは個別に変更するなどしたい時には、子要素に対してCSSを指定する必要があります。

グリッドレイアウトの勉強をしたい時には便利なサイトなので、活用していきたいですね。

角丸からグラデーションや影の設定までをCSSだけで製作すことが多いと思います。
CSSをはじめから書くのは時間がかかるという方は、CSSジェネレーターでコーディングするのも方法の一つです。
今回は、色異論設定のできる、CSSボタンジェネレーターを紹介します。

CSS Button Generator – imageless css buttons maker

ボタンの影や、文字の影を詳細に設定できるのが特徴なジェネレーターです。
シャドウを生かしたデザインに最適です。、

Button X

はじめから、プリセットが豊富で、デフォルトのままでも、十分使えるものがそろっています。
即席で使いたいという方にお勧めですね。

CSS Button Creator

ボックスの影や文字の影を詳細に設定できますが、設定できる項目が多いので、初心者には少し難しいかもしれません。