次のページ ( http://www.ecu.edu/cs-cas/engl/tpc/whytpc.cfm ) では、モバイル デバイスで列が 1 つの列に折りたたまれていることがわかります。ただし、右の列に表示される内容は、若干右にシフトしています。メディア クエリの CSS は次のとおりです。
@media only screen and (max-device-width: 480px) {
#content {
float:left;
max-width:50%;
padding:1em 0 1em 0%;
}
#sidebar {
float:left;
max-width:50%;
padding-top:1em;
}
.spacerMain {
display: block;
padding: none;
color: #2a272e;
width: 100%;
}
.column {
display: block;
width: 100%;
float: left;
clear: both;
}
.spacerCol {
display: block;
width: 100%;
padding: none;
color: #2a272e;
clear: both;
float:left;
}
}
そしてHTML：
<div id="container">
<div id="header">
<div id="navigation">
<ul>
<li><a href="/cs-cas/engl/tpc/index.cfm">Home</a></li>
<li><a href="/cs-cas/engl/tpc/whytpc.cfm">Why TPC?</a></li>
<li><a href="/cs-cas/engl/tpc/tpcprograms.cfm">Programs</a></li>
<li><a href="/cs-cas/engl/tpc/tpcsocial.cfm">TPC Social</a></li>
<li><a href="/cs-cas/engl/tpc/contactus.cfm">Questions?</a></li>
</ul>
</div>
<div id="navigation2">
<ul>
<li><a href="http://www.facebook.com/ecutpc"><img width="45px" height="45px" alt="Facebook" src="/cs-cas/engl/tpc/customcf/facebook.png" /></a></li>
<li><a href="http://www.twitter.com/ecutpc"><img width="45px" height="45px" alt="Twitter" src="/cs-cas/engl/tpc/customcf/twitter.png" /></a></li>
<li><a href="http://www.linkedin.com/pub/brent-henze/b/35a/b34"><img height="45px" alt="Linked In" src="/cs-cas/engl/tpc/customcf/linkedin.png" /></a></li>
<li><a href="http://www.ecu.edu/english"><img width="45px" height="45px" alt="Purple Bard" src="/cs-cas/engl/tpc/customcf/bardicon.png" /></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="main">
<div id="spacerMain">
<div class="column">
<div class="spacerColFirst">
<h3 class="sectionTitle">Why TPC at ECU?</h3>
The ECU Department of English offers two innovative online graduate programs in technical and professional communication: the <a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96324"><span style="color: rgb(4, 46, 238); ">Certificate in Professional Communication</span></a> and the <a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96211">MA concentration in TPC</a>.</div>
<div class="spacerColFirst"><br />
</div>
<div class="spacerColFirst">Every profession needs excellent communicators, and communication itself is becoming an increasingly complex skill set that combines strong writing and editing skills, teamwork, technological sophistication, leadership, adaptability, global awareness, and disciplinary knowledge.<br />
<br />
As part of our master's degree program, you will gain broad proficiency in all these essential areas. In consultation with your faculty advisor and other mentors, you can also focus on one or more areas of emphasis, including </div>
<div class="spacerColFirst">
<ul>
<li><span style="line-height: 1.3em;"><font size="2">technical editing and publishing</font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">emerging media and communication technologies</font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">teaching and training; and </font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">public and civic communication in contexts such as healthcare, science, government, or service organizations.</font></span></li>
</ul>
As a certificate student, you can broaden your communication proficiency by sampling across the range of our courses or develop advanced skills in a specific area of interest.<br />
<br />
As members of a large and dynamic English department, MA students are also encouraged to take advantage of the full range of courses offered in other areas of English, including rhetoric and composition, linguistics and TESL, film, folklore, literature, creative writing, and multicultural and transnational studies.</div>
</div>
</div>
<div class="column">
<div class="spacerCol">
<h3 class="sectionTitle">TPC and your Career Goals</h3>
Our programs offer practicing communication professionals the opportunity to step back from their everyday tasks to reconsider the technological changes and communication principles that shape their work environments.<br />
<br />
Our courses combine cutting-edge theories and contemporary professional practices. Many courses use a project approach, helping students to develop sophisticated workplace communication products while they learn fundamental principles of professional communication in contemporary workplaces.<br />
<br />
Our graduates become public information officers, fund raising and educational outreach professionals, program directors and communication specialists, trainers, content developers, technical editors, and technical communicators in high-tech industries. Others become educators at community colleges or four-year colleges and universities.<br />
<br />
If your career goals include effective communication, our programs can help.</div>
</div>
</div>
</div>
<div id="sidebar">
<dl>
<dt>Program Links</dt>
<dd><a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96211">MA Degree (TPC Concentration)</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96324">Graduate Certificate in TPC</a></dd>
<dd><br />
</dd>
<dd><a href="/cs-cas/engl/tpc/tpcadvising.cfm">Course Advising and Registration</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-acad/gradschool/results.cfm?id=8">English Graduate Program</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-acad/grcat/programENGL.cfm">English Graduate Catalog</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-acad/grcat/coursesENGL.cfm">English Graduate Curricula</a><br />
<br />
</dd>
</dl>
<dl>
<dt>Links for Students</dt>
<dd><a href="http://www.ecu.edu/cs-cas/engl/">ECU Department of English</a><br />
<br />
<a href="http://www.ecu.edu/gradschool/">The Graduate School at ECU</a><br />
<br />
<a href="http://www.ecu.edu/fsonline/senate/fscalend.cfm">ECU Academic Calendars</a><br />
<br />
<a href="http://blackboard.ecu.edu">Blackboard Student Access</a><br />
<br />
<a href="http://mymail.ecu.edu">Student E-Mail Access</a><br />
<br />
<a href="https://pirateport.ecu.edu/portal/">Pirate Port</a><br />
</dd>
</dl>
<dl>
<dt><a href="http://www.twitter.com/ecutpc">@ECUTPC</a></dt>
<dd>
<ul id="twitter_update_list">
<li style="list-style: none">%nbsp</li>
<li class="twitter_date">%nbsp</li>
</ul>
</dd>
</dl>
</div>
<div id="footer"> </div>
</div>