サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
おみそ汁
recost-design.com
レスポンシブデザインはもはや当たり前になっている今日このごろ。 皆がスマホを使っている今の時代。どんなサイトでもスマホから見られる可能性はあります。 どんなにあなたのサイトのターゲットとしているトラフィックがデスクトップからであったとしても、スマホからのアクセスを無視していいわけありません。 これからホームページを作る場合、余程の理由がない限り、レスポンシブ、スマホ対応にするべきでしょう。 さて、そのレスポンシブで作る時、たまに遭遇する「3」や「7」といった割り切れない値のコンテンツを横に並べる時。今までだと例えばカラムが「3」の場合、 column{ width: 33%; float: left; } と書いていました。 ただこれだと1%余り、場合によっては1pxぐらい空白が出来たりします。 table-cellという方法もありますが、flexboxを使いたい場合はtable-cell
Webデザインをしていて、ページトップへのボタンの見せ方が気になることはありませんか? 最近のデスクトップサイトではページトップ戻るボタンを付けているところが減っているように感じますが、スマホサイトではまだまだ見かけます。 今回フッタいい感じにフィットするボタンを作りましたのでご紹介します。 デモ ページトップに限らず、いろいろなボタンの設置も出来るかと思うので、参考になれば幸いです。 ボタンを右下に表示させる ボタンを右下に固定で表示させておきます。背景色や文字色はお好みで設定してください。 HTML <a href="#demo02" class="pagetop">ページトップ</a> CSS .pagetop { position: fixed; right: 30px; display: block; padding: 20px; } ボタンをフェードインで表示させる スクロール
画像や写真の切り抜きによく使うマスク(Mask) PhotoshopやIllustratorを使ったことがある人にとってお馴染みのツールですが、使い方がPhotoshopやIllustratorに慣れているとちょっとややこしい。 普通にマスクをかけたつもりが他のオブジェクトが消えてしまったり、マスクをかけた画像がいつの間にか違うところに移動してしまったり。。 マスクはSketch上でデザインを作るのに重要な機能です。 ここではマスクのかけ方から、その注意点などについて詳しく解説していきます。 マスクの基本 まずは基本のマスクのかけ方です。 1,画像を配置 まずはマスクをかける画像を配置します。 2,シェイプを配置 次にマスクの形となる図形(シェイプ)を配置します。 3,画像とシェイプを選択 シェイプを選択した状態で[Layer → Use as Mask]を選択します ※ショートカットはc
写真をきれいに並べたい時は、僕はスクエア型(正方形)の枠を作って並べる時があります。 理由は縦長の画像と横長の画像が混在している時、段違いになってずれたりするからです。 普通、CSSで正方形にしようと思ったら横幅と高さを固定にしないといけません。レスポンシブみたいに横幅が変わったする時、高さを固定にしていると正方形じゃなくなってしまいます。 「高さ=横幅」みたいな感じで一行でかけるCSSが存在してたら楽なんですが、今のとこそのような書き方は無いので、ちょっと複雑ですがレスポンシブタイプで正方形を並べる方法をご紹介します。 CSSで正方形を作って並べる それでは実際に書いていきます。 デモ HTML <ul> <li><span><img src="img/04_01.jpg"></span></li> <li><span><img src="img/04_02.jpg"></span></
表を作成する<table>タグ。 皆さんは<table>を作成する時どのような方法で作りますか? 一列ずつ手打ちで Dreamweaverを使う Table Tag Generatorのようなサイトを使う 上記以外の方法で、Macに標準でインストールされてる「Numbers」と「テキストエディット」を駆使することで、簡単に<table>を作成することが出来るのでご紹介します。 1, Numbersを起動して表を作成 まずは普通にNumbersを起動して表を作成してください。 2, テキストエディットにコピー Numbersで作成した表をHTMLにしたい部分を選択してコピーして下さい。 この時Get Plain Textのようなスタイル情報を消すアプリを使っている人はアプリを止めておいてください。 次にテキストエディットを開いてください。 ここで注意して頂きたいのが、「環境設定」で「フォーマ
診療所のホームページなどを作る時に、診療時間などを表(table)で作る時があります。htmlでは以前書いた「Numbers」を使ってHTMLのテーブルを作成する方法を使えば簡単に作成できますが、Photoshopで作るのは少し面倒です。 Photoshopはもともとそういった目的で作られていないので当然といえば当然ですが、PhotoshopでWebデザインをする人にだったら、Photoshopで表を作ったという経験は何度かあるんじゃないでしょうか。 今回はなるべく簡単に表を作る方法をご紹介します。 ちなみに今回はおおよその外形サイズだけ指定して、細かい寸法調整まではやりません。 1, 外形のサイズを決める まずはガイドを引いて、外枠を決めます。 次にガイドにそってラインツールを使って外枠に線を引きます。この時に、線がはみ出していても構いません。あとで消しますので。 2, 内線と文字を入れ
ホームページをよく作っている人は度々目にすることがあるであろう米印。 「※」 ←これです。 注意点などの前によく付けたりしますよね。 普通に段落タグ(<p>タグ)で書いてもいいですが、折り返しの時で2行目になった時に「※」の下に文字が回り込んでしまいます。 米印に限った話ではないですが、最初の一文字だけを前に出したい時に使える方法を2つ紹介します。 HTML <ul> <li>※やれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来る</li> <li>※やれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来るやれば出来る</li> </ul> CSS① text-indentを
このページを最初にブックマークしてみませんか?
『Recost Design | WordPress・Webデザイン・ホームページ制作』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く