WEBデザイン Flexbox 13 カレンダー／ページネイションの作り方
Flexbox の基本的な使い方はだいたい分かったけれど。 せっかくなので、これを何かに活用できないか？考えてみた。 （WEBレイアウトなんて、それが仕事の人でもなければ、そうそうやるもんでもないですしね。。。） タイル状に埋め尽くすように...
"スタイルシート"
WEBデザイン WEBデザイン Flexbox 11 (表示順序を入れ替える)
フレックスボックスのアイテムは、「order」を使って順番を自由に入替えられます。これは結構便利かも。レイアウトの自由度が増しますね。 例：下記のように、配置したとして・・・ 1 2 3 4 5 6 7 8 9 10 11 各アイテムに下記...
便利ツール／ソフトウェア 表示されているページを自分好みのデザインに強制的に変更できるアドオン
「Stylus」というアドオンを使うと、自分が今見ているページのデザインを変更することができます。 これがどんな時に必要かというと――― 例えば、下記のようなデザインのページがあったらどうでしょうか？ ひとまず何はともあれ、そうした幸福・仕...
WEBデザイン <pre>の中にはブロック要素を入れてはいけない
このブログでは、WordPerssのエディターの自動整形機能をオフにしてしまっています。 ※自動整形機能の切り方はこちら ので、改行にはいちいち<br>タグを入れる必要があるわけですが。 それだと見難いので、実は、手っ取り早く<pre>タグ...
WEBデザイン フォントサイズの指定は絶対値だった！
em % pt px vw vh フォントサイズの指定の仕方は色々ありますが、最近話題の？「rem」 ルートemの略で、CSS3から追加された単位で、文書の一番ベース設定となっているフォントサイズに対する相対表示なのだとか・・・ しかし、や...
WEBデザイン TABLEの下にスクロールバーが出て消えない問題
ブログ記事を自分の覚書・備忘録代わりに使っているわけですが。 たまたま過去の記事を参照してみたら、テーブルのレイアウトが大幅に崩れているのを発見 テーブル(表)が記事のカラムから大幅にはみ出してしまっていて、左端の部分しか見えていない状態。...
WEBデザイン これまでやったSimplicity2のカスタマイズとコツについてまとめ
スタイルシートが効かない場合の解決方法 全体の幅・メインカラムの幅を広げる／狭める 記事のタイトル下カテゴリの隣にタグを表示 トップページの記事リスト(エントリーカード)内にもタグを表示 サイトタイトル部を横幅一杯に広げるには コンテナの幅...
WEBデザイン 【Simplicity2】エントリーカード内に編集リンクを表示する
Simplicityは、カスタマイザーから、記事の中に編集リンクを表示するかどうかを切り替えられます。(※) ※「外観」→「カスタマイズ」→「レイアウト(投稿・固定ページ)」の中にある「編集リンクの表示」のチェックボックス ただ、トップペー...
WEBデザイン 【Simplicity2】サイトタイトル部を横幅一杯に広げるには
サイトのタイトルと概要が表示されている領域を、幅一杯に広げたかったのですが、何故か、両端にスペースが出来てしまいます。 構造図をよーく見たら、ヘッダ領域の中に、 「div.alignleft」「div.alignright」という領域があり...
WEBデザイン 【スタイルが効かない？！】FC2ブログからWordPress(Simplicity2)に引っ越してハマった事とその解決方法
WordPressでブログを始めるに当たって、テーマ（テンプレート）に｢Simplicity2｣を使わせていただきました。 カスタマイズするに当たって勝手が違ってハマってしまった事があったので、その解決方法について書いておきます。 （これか...
WEBデザイン サイトロゴ
サイトロゴを、画像編集ソフトを使わず、HTMLだけで作ってみる(笑) Googleフォントを使って、スタイルシートでボーダーの角丸めて(border-radius)と背景色を指定して(background)・・・ SKILLS OF LIF...
便利ツール／ソフトウェア スマホ用ブラウザでズームしたときに横スクロールさせずにテキストを折り返してほしい
スマホでWEBページを見ている時、文字を大きくしたいなと思う事がよくあります。ところが、ズームすると大きくはなるのですが、テキストが横にはみ出してしまい、横にスクロースしないと文章が読めなくなることがほとんどです。これはサイトのデザインにも...