Group items tagged

OVERVIEWTemplates, Styles and Better Formatting have been among the most requested Google Docs features. Well, you asked and we listened!So, as a first step we've enabled "Edit CSS" on Docs such that you can explore styling documents. Think of Docs as the platform and the world wide web your place to explore the different styles! The possibilities are endless!Secondly, we've included some examples of CSS styles here to get you started. It's important to note that CSS is something that takes advanced knowledge and we don't recommend utilizing this functionality unless you're comfortable and familiar with it. As we all know, this is a user help group, so please utilize this pages section to help one another out and to engage in CSS information sharing. We recommend you use outside sources to enhance your knowledge of CSS styles. A simple search for "CSS Examples" or "CSS Tutorials" is a good place to start.The examples given below just scratch the surface of the style possibilities so I'm very excited to see the different styles you all create.Current Limitations "Edit CSS" is not supported offline (with Gears) yet. Images (specified through styles) are not propagated through Export as PDF/Print yet. In this initial launch of CSS, we won't be allowing external image URLs to be used with CSS in Docs. However, you can still utilize images by uploading them and using the Docs image URL instead. There are instructions about this in the first example below.  Getting to your CSS dialog box!

Adding an image Need to add an image to your document? Follow these easy steps: Upload the image by going to the Insert > Picture option in the menu. You can upload images from your computer or from elsewhere on the web. After the image has been uploaded, go to the Edit > Edit HTML option in the menu, and find the image tag. It should look something like this: <img id="abc123" style="width: 100px; height: 100px;" src="File?id=abcdefg123456_987654zyxwv"> Copy the image src (shown above in red), and paste into your CSS. For example, if you wanted to use the image as a background for the document, you would use: body { background-image: url('File?id=abcdefg123456_987654zyxwv');} Once an image has been uploaded, it can be used in any of your documents, so you may find it easier to create a separate document with all your images for easy reference.

Adding a watermark (non-repeating background) CSS body { background-image: url('File?id=ad8wdwbvms_890m8v5pjdm_b'); background-repeat: no-repeat; background-position: 50% 20px;} Note: background-position is used to center this watermark at the top of the document. You could omit this and the watermark would appear in the top left of your document, or change it to move the watermark to a specific place in the background. For more information, check out the help document here!

SS設定手順 Google Docs - Documentsを開く Document（文書）を新規作成 メニューの「Edit（編集）」をクリックし、「Edit CSS（CSSを編集）」を選択 CSS編集画面が開くのでCSSを書き込む 「OK」ボタンを押すとデザインが反映される

Google GroupsでいくつかCSSサンプルが用意されていたのでご紹介。