<main class="posts">
  <a href="#">
    <article class="post clearfix">
      <aside>
        <img src="http://tsukulog.net/wp-content/uploads/2015/10/bsYUKA862_mobile15185035.jpg">
      </aside>
      <section>
        <h3>
      あっという間に要素全体をクリックできるようにする方法
  </h3>
        <p>
          スマートフォンサイト等でよくみかける、HTML5の変更のみで要素全体をクリックできるようにする簡単な方法です。
        </p>
      </section>
    </article>
  </a>
</main>
* {
  box-sizing: border-box;
}

body {
  background: #444;
  color: #333;
  margin: 0;
  padding: 20px;
}

a {
  color: #333;
  text-decoration: none;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.post {
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}

aside {
  background: #ccc;
  float: left;
  padding: 5px;
  width: 30%;
}

section {
  float: left;
  padding-left: 10px;
  width: 70%;
}

h3 {
  font-size: 24px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.