CSS / 幫表格加入橫向捲軸,讓超出螢幕寬度的表格不會擠成一團

CSS / 幫表格加入橫向捲軸,讓超出螢幕寬度的表格不會擠成一團

我們在網頁當中加入表格的時候常常會遇上一個問題,就是當表格的寬度已經超過螢幕的寬度要怎麼辦?尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性,但只設定這個屬性是不夠的,還需要對表格的加入以下屬性: 首先要先讓 table 這個物件變成 block 物件,然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容,自動加入水平捲軸。 最後是 white-space: nowrap 這個屬性,讓文字不會因為寬度自動斷行,除非內容真的有斷行 <br> 存在。 這是另一篇文章 Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表 有用到表格捲軸的範例: ▍ 關於上面三個 CSS 屬性的詳細說明可以參考 W3School 的說明: display: CSS display Propertyonferflow: CSS overflow Propertywhite-space: CSS white-space Property Copyright announcement:the featured image: Photo by The Journal Garden | Vera Bitterer on Unsplash

Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表

Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表

蘋果因為有 Retina 螢幕之後,我們想知道我們最後呈現在 Macbook 或 iPhone 畫面上的樣子都非常的麻煩,因為他有好多種解析度。例如我們在做手機的 UI 設計、網頁前端畫面、顯示在手機上的照片等等,都會需要注意到解析度的問題。 大多數的狀況來說,幾乎目前的 APP 都不支援 Retina 的呈現,也就是說 Retina 高解析度的畫面輸出只支援少部分的軟體,像是系統原生的照片瀏覽 APP 在顯示照片、影片時就是以 Retina 的解析度在顯示的。 而 Safari 或其他瀏覽器則都不支援 Retina,我猜原因應該是因為目前主流網頁的設計還是沒有以蘋果的 Retina 螢幕做設計,並竟還是有大多數非蘋果的用戶。所以在瀏覽器的設計上,蘋果還是維持原本傳統的解析度輸出。 iPhone iPhone 把畫面顯示到你的螢幕上總共會經過三個 (或四個) 過程,我們可以看到下表有三種解析度,其中最重要的是 Points,我們在做網頁設計或任何不支援 Retina 的 APP 時就會使用到這個解析度。 iPhone Points(logical resolution) Rendered Pixels(resolution) Physical Pixels 像素密度 螢幕尺寸 2G, 3G, 3Gs 320 x 480 320 x 480...

HTML / 網頁當中的六種空白字元 &nbsp; &ensp; &emsp; &thinsp; &zwnj; &zwj; 的差別

HTML / 網頁當中的六種空白字元 &nbsp; &ensp; &emsp; &thinsp; &zwnj; &zwj; 的差別

在HTML當中,空格 (space) 不僅僅就是空格這麼簡單的事,它其實有六種不同樣的空格。如果你有編輯網頁或在網路上寫文章的經驗,肯定會發現當你連續輸入好幾個空格的時候,它永遠都只會有一個空格,甚至是被當作”無內容”來解析。這是因為瀏覽器在遇到空格的時候,如果它認為這是一串字串,那麼空格就會被當作空格但不會累計,不管你輸入再多個空格它還是只會有一個。 空格在 HTML 當中被視為是特殊符號的一種,在網頁當中如果想要正確的加入空格,就必須用 HTML 的語法輸入。HTML 提供了六種不同種類的空格,其中最大的差異在於寬度上的不同。 1. &nbsp; 不換行空格 No-Break Space,不換行空格。這是最常見的空格,也是一般我們鍵盤按下空白鑑會出現的字元。大部分來說我們只會使用這樣的空白,輸入多次 &nbsp; 空格也會累計。&nbsp; 的空格寬度會受字體影響。 2. &ensp; 半形空格 En Space,半形空格。en 是一個半型字元寬度的單位,寬度為 em 的一半。例如當 16px 大小的字體,半形就是 8px 的寬度。就定義上來說,一個 en 就是小寫字母 n 的寬度,大約是半個中文字寬。 3. &emsp; 全形空格 Em Space,全形空格。和半形空格同概念,em 是一個全形字元的寬度,如果字體大小是 16px,一個 em 就是 16px,大約等於一個中文字寬。 4. &thinsp; 窄空格 窄空格,顧名思義就是寬度較窄的空格,大約是 1/6 個 em 寬。 5. ‌&zwnj; 全名是...

CSS / 透過 CSS 隱藏網頁上的元件方法,visibility: hidden 和 display: none 有什麼不同?

CSS / 透過 CSS 隱藏網頁上的元件方法,visibility: hidden 和 display: none 有什麼不同?

當我們想控制一個網頁上的元素要不要顯示出來,可以簡單地透過 CSS 的方式做到。隱藏元素的方式有兩種:visibility: hidden 和 display: none。 這裡有個範例,我們想隱藏文章的標題。先看看原本網頁應該長的樣子: ▍ 隱藏元素但保留元素的位置 visibility: hidden 使用 visibility: hidden 這個屬性會使得元素不顯示在網頁上,但它卻會保留元素的空白位置。 可以看到標題已經隱藏起來了,可是標題本身的位置也保留了下來,留下了一片空白。 ▍ 隱藏元素也不保留元素的位置 display: hidden 如果你想要把元素隱藏起來,連它的位置也不保留給它,就好像它完全不存一樣,那麼你就要使用 display: hidden 這個屬性。 需要注意的是,雖然我們把元素隱藏起來,好像它整個被移除了。但是實際上它還是存在在網頁上的,只需要打開 HTML 原始碼就可以看到,我們只是透過 CSS 的方式去控制它現在顯示的外觀狀態。 Copyright announcement: the featured image: Computer photo created by freepik – www.freepik.com

WordPress / 如何重啟 WordPress Bitnami 伺服器服務?重啟 Apache、MySQL、PHP-FPM

WordPress / 如何重啟 WordPress Bitnami 伺服器服務?重啟 Apache、MySQL、PHP-FPM

在 Bitnami 建立的環境之下要重啟服務只需要執行已經準備好的指令檔就行了!你可以輕易的開啟、停止、重新啟動任何一個服務。 ▍ 查詢伺服器服務狀態 這一指令會告訴你目前 Apache、MySQL 和 PHP-FPM 的執行狀態。 ▍ 啟動所有服務 啟動服務的指令,如果沒有指定要開啟哪個服務,它就回直接啟動所有服務。 ▍ 停止所有服務 同樣的,如果沒有給定服務的名稱,就會停止所有服務。 ▍ 重新啟動所有服務 ▍ 重新啟動 Apache 如果我們指定重新啟動 apache,它就會忽略其他服務的狀態,只重啟 Apache。這是非常常用到的指令,在我們調整過系統性的更改、修改伺服器的設定檔,或只是想要重設伺服器狀態,都會重新啟動一次 Apache 服務。

WordPress / 架站教學二:透過 SSH 連線遠端控制 GCP 並架設 FTP 伺服器 (使用 WordPress Bitnami)

WordPress / 架站教學二:透過 SSH 連線遠端控制 GCP 並架設 FTP 伺服器 (使用 WordPress Bitnami)

English Version: WordPress / Tutorial #2: How to setup FTP Server on GCP with WordPress Bitnami FTP, File Transport Protocol,檔案傳輸協定,是一個常見的檔案傳輸方式。透過 FTP 我們可以直接遠端連線到我們的 server 並且直接上傳、下載或管理遠端伺服器的檔案。 在上一篇我們已經介紹過如何在 GCP 上安裝部署 WordPress,雖然 WordPress 已經有很完整的圖形化介面可以對網站進行設定或修改,但為了做更進階的設定,我們可能必須抽換伺服器上的檔案,甚至修改檔案權限或除錯。此時就必須透過 SSH 連線和 FTP Server 去完成系統控制和檔案管理的任務。   透過 SSH 連線遠端控制伺服器 SSH 是一種加密的網路傳輸協定,最常見使用於遠端登入系統,透過指令控制系統。我們先前已經建立好的 WordPress Bitnami Server 是用 Debian Linux 作業系統建立的,所以我們可以輕易的用 SSH 連線用下指令的方式遠端控制我們的 server。 ▍ 使用 Google Cloud...

WordPress / Tutorial #1: How to install WordPress on Google Cloud Platform (GCP)

WordPress / Tutorial #1: How to install WordPress on Google Cloud Platform (GCP)

中文版:WordPress / 架站教學一:使用 Google 台灣主機免費架設自己的網站 (Mac/Win版) Many people attempt to build their own website, blog, or even business website, but they totally have no idea about how to do. We could find that there are lots of website building services online. Many of them are all free! Such as the website builders, wix.com, weebly.com,...

WordPress / 架站教學一:使用 Google 台灣主機免費架設自己的網站 (Mac/Win版)

WordPress / 架站教學一:使用 Google 台灣主機免費架設自己的網站 (Mac/Win版)

English Version: WordPress / Tutorial #1: How to install WordPress on Google Cloud Platform (GCP) 架站服務的比較,選擇 WordPress 的優點 很多人都想要自己架設個人部落格,甚至有些中小型的工作室要架設屬於自己的品牌形象網站,卻完全不知道該怎麼架設。網站上可以找到的服務和平台非常多,而且多數都有免費的版本,像是 wix.com、weebly.com 等知名網站製作平台,或是像 Blogger、Pixnet 痞客邦這類大型的部落格社群平台。不過我比較不會推薦使用 Blog 平台,原因是通常這樣的平台廣告非常的多、版面設計和網站架構的自由度很低,而且通常也很難設定屬於自己的網址。相比之下,前面提到的網站製作服務,像是 Wix,相對可以建立完整又漂亮的網站,在網站設計上的自由度也高上許多,也提供非常簡單的介面可以拖拉移動或設定網站。 不過這類的服務也不是沒有缺點,與 WordPress 這樣的架站軟體相比,自由度還是有限。而且 WordPress 的網站的擴充彈性、資料搬移、主題設定、開發社群廣大、使用人數多等都還是 WordPress 的強項。 (可以參考這篇對於 WordPress 和 Wix 的比較:Wix 和 WordPress 的終極完整 比較 – 2018 創業架站前必讀 – WordPress 網站帶路姬) 甚至有些大型知名的網站也都是使用 WordPress 架設,像是 Sony Music、Bloomberg Professional、BBC...