「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

table関連のレスポンシブ対応方法メモ

コーポレートサイトを作る場合、<table>タグを非常に高い確率で使用します。

普通に使う分には特に問題はないのですが、レスポンシブ対応のケースでは融通がきかなくて困っていました。

例えば、

  • PC表示だと縦のセル連結するけど、スマホではしない
  • でも、テキストはちゃんと上下中央配置にしたい
  • テキストの行数は結構バラバラ

こんな条件が揃うと通常の<table>だと厳しいというか、CSSが肥大化してしまいがちです。

後々の管理のためにももっとスッキリさせたいですし、そもそも対応できるのか?という疑問から、今回tableについて調べました。すると、超絶便利なものが有るではないですか。

今までtableタグしか知らなくて驚愕。

 

要素がtableタグ風に振る舞うdisplayプロパティ

CSSのdisplayプロパティを使って、各要素をtableでマークアップされた様に表示が可能です。簡単なメモから。(間違いのご指摘は尻尾を振って喜びます。)

 

:table

内包する要素のtable系プロパティを有効にします。

 

:table-row

tableタグにおける<tr>のように振る舞います。

 

:table-cell

tableタグにおける<td>のように振る舞います。のように振る舞います。

 

併せて覚えておきたい display関連のプロパティ

:inline-block

 テーブル(行)の中でセルを左右に分けたい時に重宝しました。

例えば「企業の沿革」ページなどよくある、

文章だけの行もあれば、文章と画像が入る行もあるというケース。

display:table-cellだとrowspanやcollspanなどが使用できないので、そのままだと縦に並んでしまうのですが、table-cellの中でinline-blockを上手く使うといい感じに処理ができます。

その他、テーブルで便利なCSS

vertical-align

なんと言ってもこれです。

というか、display:tableを利用する最大のメリットはこのvertical-alignが使えることかもしれません。

 

display:tableとdisplay:blockを使っていくことでレスポンシブでのテーブル対応も簡単になりました。次回案件からは悩まずに使っていこうと思います。

 

ただし、「セマンティックマークアップ」という概念においては反することなのかなぁとも思うので、この辺りは引き続き考えていきたい部分です。

 

サンプルコード

display : table のためのHTMLサンプル

display : table のためのCSSサンプル

 

We Project 1月の振り返り

2月ももう6日目となってしまうのですが、1月の振り返りをしたいと思います。

というのも、

  • 1月の終盤から約一週間の間、異常とも言える疲労感に襲われてペースダウン
  • 慣れからくるものか、エネルギーが下がってきている

という状態になっており、経験上こういう時は、実際に自分が積み上げてきたものを振り返るのが一番だと思うためです。

振り返ることで自分の行動を客観視し、それが「ああ。これだけやれば疲れも出るよね」となり、「休まなきゃ」につながる。

ただただ強迫観念的に「やらなきゃ・・・。やらなきゃ・・。」と思いながら寝るのと、自分の行動量を見た上で、体や心と相談した結果として集中して休むのでは効果が全く異なるのではないかと思うのです。

 

前置きはこのくらいにして、1月のデータを公開します。

1月の仕事、勉強時間

Activity TypeDurationPercent
Total671:59100.0%
仕事 193:14 28.8
勉強 22:43 3.4
勉強 22:43 3.4
読書 16:12 2.4
BLOG 02:40 0.4
勉強+仕事 00:57 0.1
勉強+仕事 00:57 0.1
その他 436:11 64.9

 

このWe Project2020は、仕事時間の 20%を勉強の時間として追加するのが第一目標なのですが、

(さすがに残業時間まで含めた20%だとハードルが高すぎるな、と今感じました。)

実態はさておき、今月は出勤日数から計算すると152時間の業務時間です。

そこから計算する20%は30時間30分。

この時間を学習に当てていればとりあえずの目標は達成になります。

  • 勉強(技術書の写経)22時間43分
  • 読書(関連書籍の読み込み)16時間12分
  • BLOG(当ブログの執筆)2時間40分
  • 「勉強+仕事」はおそらく計測ミスのため除外

合計:41時間35分

時間的には余裕のクリア!うん。頑張った。

1月にやったこと

1月に取り組んだのは主にjQueryの基礎固めです。

 写経はこちらで。

作りながら学ぶjQueryデザインの教科書

作りながら学ぶjQueryデザインの教科書

 

読み物としてはこちらを。

 

jQuery入門道場

jQuery入門道場

 

 

「作りながら学ぶ〜」を1冊目に消化しました。解説は非常に丁寧ですし、実際に動くものを作っていくので楽しみながら覚えていくことができます。実戦でよく使うものも多く、非常にお得感の強い一冊でした。

 

ただ、時々出てくる「これ何?」に対しての答えが非常に探しにくいです。

例えば先日記事にした箇所とか、あとは引数として渡す(event)とはなんなのか?とか。

反対に「jQuery入門道場」は動くものを作るタイプではなくて、理屈に特化した本でした。「作りながら学ぶ〜」で端折られていた辺りが非常に細かく解説されていて、この組み合わせはすごく良かったなと思っています。安いし。というか、unlimitedなら無料です。

というわけで、技術書を2冊消化し、40時間を超える勉強をしたということで。

少し休むのは当然ということにして今月も頑張ります。

pochiweb.hatenablog.com

 

 

CSSで要素を上下入れ替える方法。[レシポンシブ対応]

f:id:pochiweb:20170121133654j:plain

要素を上下で入れ替える方法。レスポンシブにも対応。

 

CSSのpositioを使った要素の上下入れ替えってよくやりますよね?

にもかかわらずいつも忘れてしまうので、コードの理解と保存のために記しておきます。

やりたいこと

 

f:id:pochiweb:20170121115137p:plain

 

こんな状態をCSSでこうしたい。

 

f:id:pochiweb:20170121115152p:plain

 

これを行います。 

 

HTML

HTML_positionで要素の上下入れ替え(レスポンシブ)

 

CSS

CSS_positionで要素の上下入れ替え(レスポンシブ)

 

手順 

  1. 全体を包むボックスを用意します。
    今回のコードだと<section>です。
    ここにposition:relativeを指定して、<section>内の左上をこのボックス内でのpositionの起点とします。

    また、同様の要素が続く場合は特に、marginで各要素との間隔を調整します。

  2. 見出しと文章を含むボックスの用意をして、必要な要素を書き込みます。
  3. <img>を記述します。
  4. css のpositionで入れ替えを設定する


入れ替えの理屈

下に移したい<div>にposition:absoluteを指定して、任意の場所に指定します。

今回は<div>を<img>の下に配置しました。

absoluteを使うと、後続の要素はabsoluteが指定された要素の高さ分詰まってきます。floating-Boxと考え方は同様です。

f:id:pochiweb:20170121131400p:plain

f:id:pochiweb:20170121131539p:plain


<div>に対して、positionをbottom:0;にすることで、imgの下に配置して、padding-topを%で指定することでボックスの高さが変わることに対応します。
配置したい位置次第でこの数値は変更します。
この<section>を複数使用する場合は、sectionに対してmarginを設定します。<div>内の<p>などの高さ次第では、メディアクエリで何段階か指定が必要になります。


残念なあとがき

そもそもこの上下入れ替えは「sectionやarticleタグの直下は見出しタグでなければならない」というvalidationエラーが出ていた為に行なっていました。

しかし、最近ではこのsectionやarticleの直後にimgが有ることに対してエラーを吐かない様なのです。いや、そもそもそんなエラーは存在しなかったのかもしれないんですが。

今回記事を書くにあたりテスト的に色々な並びでバリデータかけてみましたが、不要な様です。

We Project2200 [2017/01/09~01/15]の記録

We Project 2200開始から

1月8日から1週間の記録。

読書に約3時間半、

勉強(写経)に7時間半で

約11時間。

土日がないとやっぱり厳しいな。

Statistics

Activity TypeDurationPercent
Total167:59100.0%
仕事 41:50 24.9
勉強 07:33 4.5
勉強 07:33 4.5
読書 03:18 2.0
勉強+仕事 00:40 0.4
勉強+仕事 00:40 0.4
その他 114:37 68.2

「作りながら学ぶjQueryデザインの教科書」の非公式な正誤表

「作りながら学ぶjQueryデザインの教科書」のAjaxでハマる時の対処

今年は技術を学び、身につける一年にする。

その一冊めの教材として昨年末から取り組んでいるのがこちら。

 

作りながら学ぶjQueryデザインの教科書

作りながら学ぶjQueryデザインの教科書

 

 

ドロップダウンや固定ヘッダー、スライドショー、さらにAjaxなど今風な技術を網羅していて、発行から2年以上たった今でも物凄く使える一冊。

私はjQueryもJSもまともに学んでいなかったのですが比較的スムーズに学習が進んでおり、説明も丁寧で分かりやすいため同じような状況の人にはお勧め。

しかし、これからこの本を手に取る人の為に書いておきたいことがあります。

Ajaxの章でハマる。

多分、多くの人がAjaxの章で躓くのではないかと思います。

いくらコードを見直しても間違いない。でも動かない。
それで2時間程度はハマったでしょうか。
結果としては公式サイトに対策の記載がありました。

www.solidpanda.com

端的に言えばサーバーがJSONファイルに対応していないケースがあるので、設定してあげればOKとのこと。すぐに見つけられれば....。


作者のコラムという形で掲載されておりますが、見つけにくいです。

私は写経で動かない場合、

  1. 再三ソースを見直し
  2. 「書籍名+正誤表」で情報を探す
  3. それでもダメなら動いていない原因や箇所の特定をして、
  4. 対処をググる

という順序なのですが、皆さんどうなんでしょうか??

これは正誤表に乗せても良いんじゃない?という意味で、本記事のタイトルを非公式正誤表としました。

 

We Project2200

Statistics

Activity TypeDurationPercent
Total95:59100.0%
仕事 20:10 21.0
勉強 04:47 5.0
勉強 04:47 5.0
読書 01:26 1.5
その他 69:35 72.5

2017年の現在地[We Project2200]①

2017年の現在地。そして道しるべ

この記事に触発されて、今年は技術を磨く一年にしようと思った。

itkeijyoshilog.hatenablog.com

僕は2015年の半ばからweb制作を学び始めて、2016年から社内のweb制作部門に配属となった。年齢的にはまあ、本来であればベテランディレクターとかプロデューサーになっていておかしくない位。

 

だというのに、まだまだ足りない部分しかない!というのが個人的な気持ちで、もっともっと早く、クオリティの高い仕事を出来る様になりたいと思っていた。

そんな正月に上記の記事がTwitterのタイムラインに流れてきたのでグッと触発され、主さんには迷惑かもしれないが真似してしまおうと思う。

デザイナーではなく、Web Engineerを目指すということで[ We2200 Project ]とする。

現在地の確認

今現在のスキルとしてはこんな状態。

  • HTMLは一通り書けるが、もう一段上に行きたいと思っている。
    具体的には属性値について理解、活用することであったり、エラーを一切吐かないコーディングであったり。そして、何と言ってもスピードだろうか。
    自分のスピードを数値化できていないし、業界の水準もわからないのでなんとも言えないところだけど、最低限Emmetと構築全体を意識したコーディングがスピーディーにできる様にする。

  • CSS。こちらも一通り書けるが、細かい部分は調べながら書いていることも多い。そして時々超基本的な部分で躓いたりする。blockにし忘れてやられるとか。
    基礎理解がまだ甘いということなので、改めて要素の特性を学ぶことと、セレクタ、プロパティ共に知らないものも多そうなのでさらってみることが第一だろうか。全体としてはシンプルなCSSを目標に。

  • JSやjQueryはなんとなく読める程度。人様のブログ記事を見ながら、コードを頂いて生活しているコード乞食状態だ。これはまずいなと思っている。まずはjQueryを習得するべく書籍で勉強している最中。自分の課題を発見する以前の問題。まずはスタートラインに立つべく、数冊書籍で写経をするのが第一目標。


  • バックエンド。PHPの基礎は理解している。簡単なメールフォームやそれを応用した簡単なプログラムなら作成可能。ただし、手探りというか、エラーとgoogleの三者通話しながらな部分が多く、まだまだ。そしてデータベースの理解をしていないのが大問題。簡単なwebアプリでも作りながら学んでいこうと思う。

こうして振り返ると薄く広くの典型。この一年でどこまで分厚くできるか、試してみたい。

どこを切り取って2200時間をカウントするのか?

正直、2200時間学習するのは業務時間を省くとかなり厳しい。365日休まず6時間でようやく達成できる。ただし業務時間を全て当て込んで行ってしまうとほぼ業務時間だけで終わってしまう。

・・・・・・・・・

パレートの法則で行くことにする。2割の個人学習が8割の業務を支えると信じて。

出勤日数240*8=1920の20%で384時間。

日々残業もあるのだけど、それは含まないことにして。

それ以外でこの時間を個人学習として追加すれば良いこととすれば一日1時間半程度になるので、かなり現実的だ。

2200時間は少々超えてしまうけれど、まあいいだろう。

 

目標とするところ

今年取り組みたい技術的な部分としては、

高機能なwordpressのテーマ作りと、ECサイトの構築(ASP系とEC-CUBEそれぞれ)の2点があるのだけど、そのための柱、基礎力としてHTMLやCSSjQueryなどを自在に使える様になることを今年の目標としたい。

siblings()の使い方|jQueryメソッドの覚え書き|「webで何か」作るブログ

年末のお休みを利用して、jQueryの勉強をしていますが、歳のせいかメソッドが覚えられないので同じものを何度も調べてしまいがち。

記憶の定着のために少しづつ整理するというのが本記事の趣旨になります。

今回は

siblings() が取得するもの

siblings()は、自身を起点とした兄弟関係にある要素を取得します。

ただし、自分自身は含まれないのでアコーディオンラジオボタンなど、一つの要素が選ばれたら他は閉じるような動きの時に活躍します。

siblings( )からのremoveClass( )やaddClassなんてのはほぼ定型文。