フレークの素 | Web制作・システム開発のCreativeFlakeブログ

こんにちは、クリエイティブフレークです。 コーディングの鉄板、リスト。 横ならびリストで文字を上下左右中央に配置したい、ってことは１度は遭遇したことがあるかと思います。 でも思うようにいかないんだけど……って人も必見、絶対にできます！ ↓↓↓まずは基本はこれだけ覚えましょう。↓↓↓ HTML <ul> <li><p>リスト１</p></li> <li><p>リスト２</p></li> <li><p>リスト３</p></li> </ul> CSS li { float: left; list-style-type: none; margin: 10px; } li p { background: #8AD5DF; border: 1px solid #eee; color: #fff; font-size: 18px; display: table-cell; width: 150px; height: 100px; text-align: center; vertical-align: middle; } "text-align"が左右中央で、"vertical-align"が上下中央。 そこへ "display : table-cell;" で要素の表示方法をtdのような要素に指定します。 あとは、このリストに好きな幅(width)と高さ(height)を指定すると、指定した大きさの上下左右中央に文字が来るはず。 たとえば、背景画像が決まってって、その中に文字を収めたい、ってときにも便利です。 他には文字の長さが決まってないとき、可変にしたいときにも、自動的に上下中央になってくれて便利です。 ありがちなミス 今回<p>タグを内包させ、リストに対して"float : left"を、その中の<p>に対して上下左右中央指定をしましたが、これを一緒のタグ内で行うのはNG。 この "floa...

こんにちは、クリエイティブフレークです。 かねてからサイトの運営管理を担当させていただき、お世話になっているHalu（ハリュウ）新越谷さまの三つ折りリーフレット（チラシ）のデザイン制作を担当させていただきました。 もともとは鍼（ハリ）を中心に施術を行うサロンさまで、国家資格保有の鍼師さんが担当してくれますよ。 サロンで担当していただける先生方はすべて女性の先生なのですが、みなさん美人です！ 女性専用サロンなので、男性の方は紹介が必要です。 チラシは両面カラーの３つ折り、今回はコート紙135kgのやや厚手の紙です。 印刷物もできるの？とよく言われますが通常、Web制作屋さん、ましてやシステム屋さんは印刷物はやらないところが多いと思います。 なんですが、Web＋紙を希望されるケースも比較的多く対応いたします。ぜひご相談ください！ 今回制作担当させていただいた「Halu（ハリュウ）新越谷」さまについて 埼玉県越谷市南越谷4-11-4 セントエルモ新越谷701 東武スカイツリーライン 新越谷駅西口、JR武蔵野線 南越谷駅南口より徒歩1分 URL : http://halu.co.jp 施術内容 : 美容鍼、エステ、痩身、ブライダルメニュー、ヨガ Written by Creative Flake

こんにちは、クリエイティブフレークです。 普段はあえてコードに組み込むことがあまりないtimeタグですが、このtimeタグには利点もたくさん。 timeタグっていうくらいだから、時間に関するタグなんでしょ？ってくらいは分かると思いますが、改めて考えてみます！ <time>タグについて ・機械が「時間」や「期間」として認識できるHTMLタグ ・スケジュールやアーカーイブなどに使用されることが多い ・WordPressではデフォルトのテーマに使われている 一度は消えた<time>タグ <time>タグは2009年、HTML5のタグとして一旦は追加されたもの、2011年に削除されてしまいました。 しかし間もなく、時間要素が改良されたタグとして復活しました。 タグと属性 2014年7月を記す場合。 <time>2014-07</time> オプションとしてdatetimeという属性を追加することができます。 <time datetime="2014-07">雨の多い蒸し暑い夏</time> <time datetime="2014-07">2014年7月</time> これは人間が分かりやすい形式で自由に記述します。 属性に関する10個の方法 ①年月 2014-07 ②日付 2014-07-01 ③年をつけないパターン 07-31 ④時間だけ（秒はオプション） 12:34:10.999 ⑤日付と時刻 日と時間の間に「T」を入れます。（TはスペースでもOK） 2014-07-01T13:50 ⑥タイムゾーン +または-からスタート。:（コロンはオプション） +09:00 ⑦ローカル日時 2014-07-01T23:59:59+09:00 ⑧年と週（週の前に「W」をつけます） 2014-W21 ⑨年だけ 2014 ⑩期間（週:w、日:d、時間:h、分:m、秒:s） 1w 2d 2h 30m 10.501s 使用例 富士山が世界遺産に登録されたのは、<...