20190403の新人プログラマ応援に関する記事は3件です。

tableをレスポンシブにするときにはみ出したり中央に寄らなかったりラジバンダリ

tableのレスポンシブ対応で困ったこと

そもそもtableは何だか苦手なのであるが、、
スマホでみるときには2列のテーブルではなく1列のデザインにしようと、display: block;を使ってやっていたのはいいのだが、下記3点に悩まされた。

①横幅MAXにしても改行しないをレスポンシブで打ち消せていなかった

@mediaの時にきちんと打ち消せていなかったので、下記のように対応した。

white-space: nowrap; /* 横幅のMAXに達しても改行しない */
overflow: hidden; /* ハミ出した部分を隠す */
text-overflow: ellipsis; /* 「…」と省略 */

@media
white-space: normal; /* 横幅のMAXに達しても改行する */
overflow: visible; /* ハミ出した部分を隠さない */
text-overflow: clip; /* 「…」と省略しない */

②tdの横paddingをつけていたがためにスマホ表示で横に変な空白ができた

横paddingは0にして、widthを90%くらいにして左右は margin: auto; で調整した。変な空白ができた状態はこんな感じ。
image.png

参考

width:100%なのにはみ出す理由と回避策。

③tableに対してborder-collapse: collapse;をしておらず、trにborderが出なかった

前も同じことがあったのに忘れてて、無駄な時間を過ごした。すぐググればよかった。

参考

trにborder-bottomを引く!

終わりに

日々新しいことを学び、そして前に学んだことを忘れ、でも時代はどんどん進んでいて、心配になりますが、焦らず地道にやっていきます。(今日はgitの勉強までできるだろうか。。)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

苦手とするgit攻略への道-新人HTML/CSSコーダーの苦悩-

gitとは

分散型バージョン管理システムの一つ。ファイルの状態を好きなときに更新履歴として保存しておくことができ、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることがでる。
古いファイルを元に編集したファイルで、他人の編集した最新ファイルを上書きしようとすると、サーバにアップロードした時に警告が出るため、知らず知らずのうちに他人の編集内容を上書きしてしまうといった失敗は起こらない。(ほぼ さるわかの引用)

gitとかgithubとか何やねん(ここからが独自理解)

とりあえずgitという素晴らしい分散型バージョン管理システムがあって、リモートリポジトリ(共有のファイル置き場)とローカルリポジトリ(自分のPCに配置するリポジトリ)という概念がある。そして、リモート側を可視化してくれるのがgithubというアプリケーション。コマンド操作を可視化してくれるのがSorcetreeなどのGUIアプリケーション。gitに必要なコマンド操作とは、コミットしてリモートにプッシュしたり、リモートからプルしたり、、など。

ということで今後の方針

githubについてはリポジトリを作成するところまではできたので、GUIアプリケーションを使ってコミットしたりってのをやっていこうと思う。直感的にSorecetreeが良さげだったのといい動画を見つけたので、Sorcetreeでやってみる。

補足

リポジトリとは

リポジトリとは、ファイルやディレクトリの状態を記録する場所です。保存された状態は、内容の変更履歴として格納されています。変更履歴を管理したいディレクトリをリポジトリの管理下に置くことで、そのディレクトリ内のファイルやディレクトリの変更履歴を記録することができます。

ディレクトリとは

ディレクトリというのは、フォルダのことです。Windowsでは、わかりやすくフォルダと表現しています。WindowsやMacでは フォルダという言葉を使っていますが、コンピュータ全般では ディレクトリという言葉が昔から使われてます。

参考

【git】#01 はるちゃんと学ぶgit講座 コミット編
サルでもわかるGit入門
ディレクトリとは

次回のgitに関する投稿はこちら

苦手とするgit攻略への道 -新人HTML/CSSコーダーはシンプルに考えた-

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

苦手とするgit攻略への道-vol.1新人HTML/CSSコーダーの苦悩-

gitとは

分散型バージョン管理システムの一つ。ファイルの状態を好きなときに更新履歴として保存しておくことができ、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることがでる。
古いファイルを元に編集したファイルで、他人の編集した最新ファイルを上書きしようとすると、サーバにアップロードした時に警告が出るため、知らず知らずのうちに他人の編集内容を上書きしてしまうといった失敗は起こらない。(ほぼ さるわかの引用)

gitとかgithubとか何やねん(ここからが独自理解)

とりあえずgitという素晴らしい分散型バージョン管理システムがあって、リモートリポジトリ(共有のファイル置き場)とローカルリポジトリ(自分のPCに配置するリポジトリ)という概念がある。そして、リモート側を可視化してくれるのがgithubというアプリケーション。コマンド操作を可視化してくれるのがSorcetreeなどのGUIアプリケーション。gitに必要なコマンド操作とは、コミットしてリモートにプッシュしたり、リモートからプルしたり、、など。

ということで今後の方針

githubについてはリポジトリを作成するところまではできたので、GUIアプリケーションを使ってコミットしたりってのをやっていこうと思う。直感的にSorecetreeが良さげだったのといい動画を見つけたので、Sorcetreeでやってみる。

補足

リポジトリとは

リポジトリとは、ファイルやディレクトリの状態を記録する場所です。保存された状態は、内容の変更履歴として格納されています。変更履歴を管理したいディレクトリをリポジトリの管理下に置くことで、そのディレクトリ内のファイルやディレクトリの変更履歴を記録することができます。

ディレクトリとは

ディレクトリというのは、フォルダのことです。Windowsでは、わかりやすくフォルダと表現しています。WindowsやMacでは フォルダという言葉を使っていますが、コンピュータ全般では ディレクトリという言葉が昔から使われてます。

参考

【git】#01 はるちゃんと学ぶgit講座 コミット編
サルでもわかるGit入門
ディレクトリとは

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む