Adding Tag/Category Name as CSS Class in Query

I’m trying to develop a portfolio page for myself, and I would like to do different things with the tags & categories based on their names.

The page I’m working on is this: http://erickaseastrand.com/portfolio/
The PHP file I have is this: http://erickaseastrand.com/wp-content/themes/slightlyoffkilter/portfolio.php

The forums I’ve been looking at are confusing, but this is what I have so far.

<div id="portfoliogrid">

<?php endwhile; ?>
<?php //The Query
 query_posts('category_name=portfolio&posts_per_page=10'); ?>
         <?php //The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  

    	<div class="portfoliobox <?php the_category ?>">

            <a href="<?php the_permalink() ?>"><img src="<?php the_field('thumbnail') ; ?>"></a>
            <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
            <p><?php the_field('excerpt') ; ?> <a href="<?php the_permalink() ?>">Read More...</a></p>
            <?php the_tags('<p class="tags"><span class="<?php body_class($class); ?>">', '</span><span <?php body_class($class); ?>>' , '</span></p>'); ?> 

		</div> 

<?php endwhile; else: endif;?>
<?php //Reset Query
wp_reset_query(); ?>            

   </div>

What I would like to do is the following:

<span class="school">School</span>

Where school is the tag slug and School is the friendly name.

I would like to to do this for each individual tag within each individual query post.

Then, similarly, I’d like to classify the portfoliobox div as a certain category, ie the following:

<div class="portfoliobox graphic-design">...</div>

Where graphic-design is the category slug.

The codex seems unclear in these sorts of examples so if someone could explain to me how mine would be directly implemented via their own words or a different website, that would be ideal.

Thank you for any help you can provide.