HTML&CSS

アスペクト比を保ちながら拡大縮小できるブロックの作成

レスポンシブサイトを作成するときに、アスペクト比(縦横比)を保ったまま拡大縮小するブロックを作成したい場合があります。簡単そうで結構ハマるところです。 今回はアスペクト比を保ちながら拡大縮小できるブロック領域の作成テクニ  >>続きを読む

CSSで表現するブレンドモード〜CSS3

ブレンドモードは2つの画像や画像と塗りをブレンドして表現するものです。 Photoshopなどで頻繁に活用される手法ですが、CSSでも使用することができます。 background-blend-modeプロパティ 注)I  >>続きを読む

CSS3でフィルター効果をつける

フィルター効果は本来SVGのグラフィック効果として実装されました。しかし、フィルター効果はCSSからも利用することができます。 CSSでフィルター効果をつけるのは非常に簡単な上にその効果も大きくPhotoshopなどでの  >>続きを読む

[HTML5.1] tfootの使い方が変わっています。

テーブルの構造化を行うタグ「tfoot」の使い方がHTML5.1で変更になりました。 「tfoot」は「thead」「tbody」の後に使用する事となっています。 HTML4.01時代は「thead」「tfoot」「tb  >>続きを読む

HTML5.1勧告でh1の使い方に変更〜アウトラインの作成

2016年11月にHTML5.1の勧告ではセクショニング・コンテンツ内であっても適切なランクの「heading」を使用する事とされています。 HTML5から「h1」の使い方が大きく変更されていました。 セクショニングタグ  >>続きを読む

Sublime Text3でSassとCompassを使えるようにする

SassとCompassの導入がすでに行われており、Sublime Text3でscssファイルを保存すると自動でコンパイルするための方法です。 そうするとKoalaなどを使用する必用もなく手軽にSassが使えます。 S  >>続きを読む

CSSのメディアクエリの記述をSassのmixinでまとめました

iPhone5〜7に対応したCSSメディアクエリをSassの@mixinにしました。 GitHubに置いていますので、下記アドレスからファイルをダウンロードしてください。 https://github.com/haido  >>続きを読む

FlexBoxの使い方(6)〜flexプロパティの練習

flexプロパティの練習用サンプルを作成しました。 flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。 値は数字の0以上の整数を入れてください。 数値入力後に「CS  >>続きを読む

FlexBoxの使い方(5)〜flexプロパティについて

DogRoboの寝床は汚いアパートメントの部屋の一角にある。そこには3台のロボットが置かれている。少し前まではもう一台「Kuma5rou」ロボットが居た。 「Kuma5rou」はコンピュータを持たない前近代型ロボットだっ  >>続きを読む

FlexBoxの使い方(4)〜display:inline-flexについて

紆余曲折の上、華々しくデビューしたdisplay:flexは脚光をあびている。ところが、inline-flexときたらほとんど語られることがない。 なんということだろうか。これではinline-flexの立場がない。 D  >>続きを読む

FlexBoxの使い方(3)〜flexアイテムの順番を入れ替え

順番を入れ替えるにはorderを使う。 「わしは、王(order)だ! 言うとおりに並びなさい」 こうやって覚えればよいのさ。。 グルグル、グルグル!DogRoboはブリキ製のおそまつな出来具合のため、正確にワンワンと発  >>続きを読む

FlexBoxの使い方(2)〜整列の方法とfloatレイアウトとの違い

DogRoboの住む世界は仮想空間なのだから、物理の法則も好きに作ればよいことになる。幸いW3Cなる機関が全国のロボットの住人に許可を得ながらそれらしい物理の法則を作ってくれる。利権がらみの論争も多くってね、正直すこし待  >>続きを読む

FlexBoxの使い方(1)〜display:flexについて

DogRoboの毎日の仕事といえばブロック積みをすること。ブリキ製のロボットにとって単純作業はお手のものだ。けれども、困った案件もある。ブロックを横並びにすることは簡単ではなかった。そのためには、ブロックを浮遊状態にして  >>続きを読む

可変レイアウト(Fluid Layout)作成のポイント

DogRoboの一日は朝食で始まる。 ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7  >>続きを読む

:nth-child練習ページ・jQueryセレクタ練習ページ作成しました。

:nth-child練習ページとjQueryセレクタ練習ページを作成しました。 :nth-child練習ページの使い方 :nth-child練習ページ Lesson1 li要素を10個用意しています。 各li要素はfle  >>続きを読む

CSSのpositionでtop bottom left right全て指定した結果

CSSでpositionプロパティでabsoluteを指定した上で座標の指定をtop bottom left right と四方向すべてに対して行ったとしたらどうなるでしょうか。 結果はサンプルのとおりになります。 to  >>続きを読む

ボーダーに画像を使う方法〜CSS3

画像が使えないボーダーなんてジャムを入れない紅茶のようなものだ。 ボーダーに画像を適用するには border-image-sourceプロパティで画像を読み込んで、border-image-sliceで幅を指定すればよい  >>続きを読む

マルチカラムレイアウト 段組の作成〜CSS3

一般的にWebで読みやすい行の長さは、約30文字から45文字前後くらいといわれています。具体的な文字数の根拠は不明ですが、あまり長すぎる行は読みにくい傾向になります。 *「ブログデザインを考える:1行の字数とWEB幅」に  >>続きを読む

Bracketsの使い方

Sublime Text だの Atom だの便利なエディタがほとんど無料で使用できる中、Dreamweaverの存在価値が無くなってきていました。 そんな中突如 Dreamweaver CC 2017(Beta)が姿を  >>続きを読む

Google Mapのスクロールを止める方法

Google Map共有機能の「地図を埋め込む」を使って、サイトにMapを表示する場合iframeが使用されます。 簡単に導入することができて便利に使えますのでさまざまなサイトで活用されています。 ところが、ひとつ問題点  >>続きを読む

Koalaの使い方〜Sass

KoalaはSassをGUI環境で使うことができるコンパイラです。デザイナーさんはコマンド操作よりも、こちらの方が使いやすいかもしれません。 ここではKoalaの使い方を学習します。 Koalaのインストール(Windo  >>続きを読む

MacOS X El CapitanでUSBをフォーマットしてWindowsと共有させる方法

Macで作業を行い、USBを介してWindowsとデータのやり取りを行う場合、USBのフォーマットに注意しないとWindowsでは認識できないことになります。 Mac側でUSBをフォーマットするには、ディスクユーティリテ  >>続きを読む

appearanceプロパティについて〜CSS

appearanceプロパティは、ボタンなどの見た目をコントロールするものです。特にスマホサイト作成の時には重宝されることが期待されましたが、主要ブラウザの対応はマチマチで、なおかつW3CのCSS3仕様書から削除されたり  >>続きを読む

Sublime Text3の便利な使い方

*2017/5/7追記しました。 Sublime Text3のソースフォーマット Sublime Text3のソースフォーマットはデフォルトで用意されています。 フォーマットしたい部分を選択するか、全選択してメニューから  >>続きを読む

SVG〜フィルターを使ってスライムのような効果

SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。 応用するとモバイルのハンバーガーボタンの変わりにもなります。 元ネタはCSS-TRICKSのサイトです。 サンプル *このサンプルはSafari9.  >>続きを読む

SVGとアニメーション2〜pathを描くようなアニメーション

CSS3を使用したアニメーションの例です。 ハートのパスを描いて最後に赤く塗りつぶすものです。仕組みがわかれば簡単に応用できて、見栄えのするパーツを作成できますのでマスターしておきましょう。 サンプル SVGコード ハー  >>続きを読む

SVGとアニメーション1〜pathに沿って移動するアニメーション

今回ははSVGのpathに沿ってDOM要素をアニメーションさせる方法です。 SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。(有料ですがフロントエンドの方にはお勧めのサイトです。) シン  >>続きを読む

SVG〜Illustratorで作成

SVGの基本的な描き方は「SVG入門」で書きましたが、四角や丸などを描くならまだしもちょっとしたイラストを描くだけでもコードで描写するのは現実的ではありません。 今回はIllustratorであらかじめイラストを作成して  >>続きを読む

SVG入門

SVGとは SVG(Scalable Vector Graphics)とはベクター形式で描画することができる画像形式です。一般的な画像はラスタ形式のもので拡大すると画像が劣化しますが、SVGはベクター形式ですから劣化しな  >>続きを読む

Webサイトの縦書き

2015年には主力ブラウザでは縦書きに対応してきています。縦書きの需要も高くなることが考えられます。まだまだ細かいところでは課題が多いですが、基本的な事はマスターしておきましょう。 横書きを縦書きに変更するCSS3プロパ  >>続きを読む