WEBデザイン CSS
WEBデザイン 便利ツール／ソフトウェア SASSを使ってみる２ SASSのその他の機能
はい、というわけで、前回はSASSを使ってみたわけですが～とラジオDJ風に書き出してみたりして。 SASSの続きです。 SASSには、CSSにはない独自の便利機能も持っているそうです。 (1)変数が使える 「$」記号を使って変数を宣言して、...
便利ツール／ソフトウェア SASSに挑戦
SASSという、CSSを書くのに便利な新しい言語があると聞き。 検索してみたら、どうやらSCCを少し分かりやすく書くことができるメタ言語※だとか。 ※メタ言語というのは、ある言語を書きやすくするための言語（そのままですね） 分かりやすく言う...
WEBデザイン Flexbox 17 (align-self 縦方向の余白を個別に設定する)
「 align-items 」は(通常配列の場合)縦方向の余白の埋め方を指定するが、「 align-self 」を使うと、さらにアイテムごとに個別に指定できるというので試してみる。 まず、通常並べただけ。 1 2 3 4 5 6 .test...
WEBデザイン Flexbox 16 (justify-content／align-items／align-contentの違い)
justify-content のプロパティオプションは前に紹介したのよりもっとたくさんあるらしい。 また、どう違うのかがいまいち分かりにくいので、全部実際に試してみる。 justify-contentオプション center■■■中央寄せ...
WEBデザイン Flexbox 15 ズレた３カラムデザインを考えてみた
ヘッダ・フッター以外の本文部分を縦に3つに割るのではなく、上下方向に三段にして、中にFlexboxで３つずつ子領域を作成。 子領域の中身によって幅が伸縮するので、縦方向では三列だけどズレた配置になる。 グリッドレイアウトに似ているけど、こち...
WEBデザイン テンプレートのスタイルをリセットするには
「P」や「H1～H6」「PRE」「TABLE」などの一般的なタグのスタイルが、使用しているテンプレートやテーマによって既に規定されていて、記事の中で使う時に予想外の表示になって困惑することがあります。 ※このブログは「Simplicity2...
WEBデザイン テーブルに余白ができてしまう原因
結論から言うと、自分の下らないミスなんですが このブログの記事の中で、テーブルを使って表を作った際に、全体の幅に合わせてセルの幅が伸縮してくれず、妙な余白ができてしまう状態になっていました。 こんな感じ #main table.test{b...
WEBデザイン Flexbox 14 (Flexbox非対応ブラウザのためにFloatを入れてみる)
Flexboxに挑戦の9番目の記事で、Flexbox 非対応ブラウザで見た場合、回り込みが解除されて縦一列になってしまうという記事を書きました。 ブラウザは、基本的には、「知らないスタイル指定は無視する」という動作をするようなので、Flex...
WEBデザイン Flexbox 13 カレンダー／ページネイションの作り方
Flexbox の基本的な使い方はだいたい分かったけれど。 せっかくなので、これを何かに活用できないか？考えてみた。 （WEBレイアウトなんて、それが仕事の人でもなければ、そうそうやるもんでもないですしね。。。） タイル状に埋め尽くすように...
WEBデザイン Flexbox 12 (アイテムの中の要素の縦方向の中央寄せ)
まず、下記のように子アイテムを用意 TEST これを内包する親領域のフレックスボックスを作成 （width: 320px;height: 160px;） TEST TEST TEST #main .parent{width:320px;he...
WEBデザイン スマホでの見え方をPC上のブラウザから確認するには
サイトのデザインをしていて、スマホでの見え方を確認したいとき 一番確実なのは、スマホで見てみれば良いわけですが(笑) しかし、スマホと言ってもAndroidとiOSがあるわけで、また機種によって画面のサイズも違っていますので・・・ 自分が持...