CSSグリッドでレイアウトしたのはいいが、固定サイズはできたけれどもリキッドレイアウトにならないと頭を抱え込んでいませんか。 CSSグリッドは慣れると紙のデザインをやっていた人には馴染みやすいかもしれませんが、あまり細か >>続きを読む
HTML&CSS
CSSグリッドを可変レイアウトにする方法
object-fitプロパティとobject-positionプロパティを活用した正円形の画像表示
CSSのborder-radiusプロパティを使用すると簡単に角丸を作成することができます。 border-radiusプロパティの使い方は MDN web docs ページを参考にしてください。 border-radi >>続きを読む
srcsetの使い方とpictureタグの使い方
今回はレスポンシブ画像の表示方法についてです。 HTML5からimgタグで複数の画像を選択できる2つの新しい属性ができました。 それは「srcset」 と 「sizes」属性です。 サンプル 具体的なコード [crayo >>続きを読む
Twitterのタイムラインをホームページに埋め込む方法〜2018年更新版
2018年夏に埋め込みタイムラインをtwitter.comのアカウント設定で管理することはできなくなりました。 代わりに、publish.twitter.comで埋め込みコンテンツを設定するようになっています。 publ >>続きを読む
「width:100%」と「max-width:100%」の違い
今回は「width:100%」と「max-width:100%」の違いについて焦点を当ててみます。 「width:100%」について 次のサンプルを見てください。 全体を囲むdiv要素に「width: 100%」を指定し >>続きを読む
ブレイクポイントは「em」で指定〜スマホサイト作成
メディアクエリの設定でブレイクポイントの単位を「px」で指定することが多いと思いますが、「px」で指定するとSafariで思わぬ不具合に遭遇します。 これは2016年頃に広がったネタですが、いまだにSafariでは同様の >>続きを読む
CSS〜インライン要素に使えるbox-decoration-breakプロパティについて
インライン要素に対してCSSで装飾することは珍しいかもしれません。 box-decoration-breakプロパティとは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。 具体的にはインライン要素 >>続きを読む
CSS shape-outsideプロパティを使ってみよう
画像に対してfloatをかけて、テキストを流し込みをする場合、通常の写真なら特に問題はないのですが、画像の形を丸くした場合テキストもその円形に沿わせたくなります。 下図参照 このようにするには「shape-outside >>続きを読む
CSSのbackground-clipでテキストをグラデーションに
CSSのbackground-clipでテキストをグラデーション加工することができます。 本来は「background-clip」プロパティは、要素の背景がcolor又はimageの時、境界の下まで拡張するかどうかを指定 >>続きを読む
CSSで立体的に回転するカードの作り方
div要素などで作成されたカード型のグリッドをマウスホバーで回転させる仕組みです。 回転はy軸を基準に回転して表面と裏面を入れ替えるもので、この仕組みをCSSで実現します。 完成サンプル GitHubソース カードの作成 >>続きを読む
CSS〜 object-fitでアスペクト比を保持しながら画像を拡大縮小
HTMLのimgタグで挿入した画像を拡大縮小をするには、img要素に対して「width:100%」とすればアスペクト比を保ちながら拡大縮小を行うことができます。このような仕組みの画像のことをフルードイメージと言います。 >>続きを読む
CSSでクリッピングマスクを使う方法
CSSでマスキングするにはクリピングマスクを使うことができます。 指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。 E { clip-path: shape } shapeはcirc >>続きを読む
headerのコーディング例〜CSS
シンプルなヘッダー領域のコーディング例です。古典的な手法からFlexBoxを活用した方法の例です。 古典的な方法 要素を水平方向に中央揃えする方法は簡単に行えます。 例えばdisplay:blockの要素なら、幅を決めて >>続きを読む
CSSグリッドの基本〜display:gridの使い方
Grid layoutについて これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウト >>続きを読む
CSS グリッドレイアウトでコーディングするならFirefoxを使おう〜display:grid
display:gridでレイアウトするのが標準になる日も近いと思います。 さて、開発する際の検証はChromeを使う場合が多いと思いますが、グリッドレイアウトに限ってはFirefoxが強力です。 一度試してみると良いで >>続きを読む
FlexBoxプロパティ〜まとめ
FlexBoxのプロパティと値をまとめたものです。 FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。 ネット上にも団子の串刺しのようなイラストが乱立しているようで >>続きを読む
簡単にローカルなSASS環境構築
SASSを毎日使用するような人は自分にあった環境を作り込んでいると思います。けれども時々使いたい場合、Gulpで環境作るのは面倒だし、エディタに設定していたはずのものがなぜかうまく動かないなどと困った場合に、手軽にローカ >>続きを読む
WatsonのAssistant機能をDogRoboにつけました
IBM WatsonのAssistant機能をDogRoboにつけました。 まだテスト運用で色々なことはできませんが、試してみてください。
デザインカンプからコーディングで重宝するツール
デザインカンプと1pxも違わないコーディングを行うには細かな確認が必要になります。 そんな時に役立つツールの紹介です。ただし、MAC専用です。 LayerX psd形式を含めた画像ファイルを透明化してコーディングしたペー >>続きを読む
マークダウンの勧め
マークアップ言語にはHTML言語も含まれるわけですが、そのほかにも様々な記述方法があります。そしてその中の一つにマークダウンという記述方法があります。GitHubの中でもDocumentとして活用されています。 HTML >>続きを読む
FlexBoxの使い方（7）〜 flex-wrapについて
floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定した幅はしばしば無視されて >>続きを読む
Twitterユーザータイムラインを自分のホームページに表示
ここで紹介した方法は現在中止されています。 Twitterのタイムラインをホームページに埋め込む方法〜2018年更新版を参考にしてください。 Twitterのユーザータイムラインを自分のホームページに表示する方法は他のS >>続きを読む
Instagramの「accessToken」と「userid」を取得する方法〜2018年4月版
InstagramのAPI使用方法 Instagramの投稿内容を自分のホームページで表示するには、面倒な手続きが必要です。 それは「accessToken」と「userid」を取得することから始めます。 なお、2018 >>続きを読む
inline要素のpaddingを使う場合の注意点
display:inlineに設定された要素にpaddingをつけた場合の注意点です。padding-leftの指定を行っても、行の終端でインライン要素が折り返された場合には、次の行の先頭にはpadding-leftが付 >>続きを読む
全称セレクターと擬似クラス
全称セレクターは簡単なサンプル作成時にmarginやpaddingを初期化する時くらいしかお目にかからないのですが、実はもっと使い方があります。 CSSの仕様書には次のように記述されています。 全称セレクタ * (名前空 >>続きを読む
floatの仕組みとoverflowでfloat解除できる理由
HTML&CSSのコーディングで初心者泣かせなのがフロートを使ったレイアウトです。その理由は正しいfloatプロパティの原理原則を勉強してない事と、clearプロパティの正しい使い方を理解してないからです。 また >>続きを読む
CSS詳説（2）構文と基本データ型について
このカテゴリでは構文と値についての記述されています。 構文 トークン まずはトークンの決まりごとについて。 プログラム言語に置いてトークンとは、コードの最小単位の語句のことで、ここでは字句レベルで、CSSスタイルシートは >>続きを読む
CSS詳説（1）仕様書を見よう
CSSを本気で勉強するとしたら、仕様書をまず読みましょう。 今回の記事はCSSの仕様書に沿って重要な点をチェックしていきたいと思います。 もしあなたが入門書を勉強したり、ネットで情報を探しながらなんとなくCSSを覚えてい >>続きを読む
Tableの使い方詳説〜HTML & CSS（２）tableやtdのborderとwidthの関係
セパレートタイプのボーダーの考え方 tableのボーダーは通常のボックスモデルの考え方ではありませんので注意してください。 まず、tableタグにボーダーを設定するとテーブル全体の外枠だけボーダーが引かれます。その際にw >>続きを読む
OSXを10.13（macOS High Sierra）にアップデートしてSASSのコンパイルがうまくいかない時の対処法
MAC OS High SierraにアップデートしたらDreamweaverのSASSのコンパイルに失敗するようになりました。 対処方法として下記リンクの通りで動きました。どうやらXCodeコマンドラインツールのアップ >>続きを読む