Style Sheet for print (print CSS)
As for the print of the homepage, there might be a lot of people who are not setting it because it can print even if nothing is especially specified. Because I have a lot of advertisements in the homepage, it is printed on an unnecessary part that the homepage is usually printed. Paper becomes, and uselessly it becomes, and ink becomes useless, too. Externals are not good either.
Then, because Style Sheet for the print was easily made, it introduces the method and the noted point. Please look at this page in the preview of the print. It is sure to become it neatly.
Display and print of homepage with external style sheet
When the number of pages becomes 200-300 or more, the management becomes it very much though you may individually specify the design and the display of the individual page in little the number of pages of homepages in the file.
To prevent this, we will recommend home page design, the display, and the print to be described from the stage where making the homepage is early with external style sheet CSS (Cascading Style Sheets cascading Style Sheet).
Writing of external style sheet (CSS) for print
The method of reading the external style sheet for the print is described in head tag <HEAD></HEAD> as follows.
<link rel="stylesheet" href="style.css" type="text/css" media="all"> <link rel="stylesheet" href="http://***.jp/print.css" type="text/css" media="print">
It specifies it on when is in the folder that the file of Style Sheet named style.css is the same as the HTML file (directory). The file name doesn't care about another thing if the extension is CSS either.
The line above is Style Sheet for the display of a usual homepage. It is specified, media="all". The line below is Style Sheet for the print. It is specified, media="print". The display might not go well when it makes a mistake in this order.
In the homepage builder, because Style Sheet is not displayed well if it doesn't write by the relative path, the line on is written by the relative path.
If Style Sheet for the print is written by the relative path, Style Sheet for the print seems to influence the display of the homepage on the homepage builder. (It seems that the bug of the homepage builder. )To display it neatly with the homepage builder, Style Sheet for the print is written by the absolute path from http.
There is a method of adding Style Sheet for the print to Style Sheet of the main as described at the end on this page, too. It seems to be unquestionable for the homepage builder. I recommend this method.
Content of external style sheet (CSS) for print
Only a part of Style Sheet for the display used on the homepage is changed, and Style Sheet for the print is made. I set only non-display of the advertisement and non-display of the menu.
It doesn't care as it is for the print because the width of the screen on the homepage that I am making changes according to the screen size. It doesn't care as it is because the size of the character is set to the standard, and the user is changed similarly. The color of the background is not usually cared about as it is because it is not printed either.
With Style Sheet for the display The blank can be done right by reducing by the print when max-width is set. Therefore, to Style Sheet for the print A very big value is set to max-width.
The method of erasing the part of the advertisement of the left loses the margin in a right, main part in Style Sheet. Moreover, the display of a left side part is erased. The one to specify the display position with position: absolute It changes to position: relative or it deletes it. Otherwise, when printing, it is likely to freeze it according to a browser.
#main {max-width: 1500px; margin: 0; padding-left:20px;}
#side {display: none;}
It encloses with the DIV tag before and behind the advertisement and the menu as follows to delete a right advertisement and the menu and class is applied to it.
<div class="np"> Ad tags </div>
To Style Sheet (print.css) for the print as follows Class np is added.
.np {display: none}
Easy explanation of external style sheet (CSS)
".np" "Dot + np" above It is a description method when specifying it by class="np". Even degrees of this class how many can be used on the page.
Moreover, when the comment is described in Style Sheet, it describes it like /* comment */.
A detailed usage of Style Sheet is http://www.tohoho-web.com/.
Only the changed part is made Style Sheet for the print.
I see ..only having make it.. only in the part newly added the part changed for the print though it had thought Style Sheet to have to make it at all for the print up to now.
Style Sheet for the print was finally as follows for me. When it is this, it is easy and management is very easy.
#main {max-width: 1500px; margin: 0; padding-left:20px;}
#side {display: none;}
.np {display: none;}
Method of adding Style Sheet for print to Style Sheet of main
It had been thought up to now that Style Sheet had to do the file for the print separately. However, it only has to add the part changed for the print and the part newly added at the end of Style Sheet of the main.
When it is this method, print.css is unnecessary, and the file is good by one. Reading the file quickens, and therefore, it is good also for SEO and the user, and it becomes easy to manage very easily.
@media print {
#main {max-width:1500px;margin:0;padding-left:20px;}
#side {display: none;}
.np {display: none;}
}